如何使按鈕保持選中狀態？[復制]-有解無憂

這個問題在這里已經有了答案：如何使按鈕保持選中狀態？[復制]

button {
  width: 100%;
  background-color: #8e95a2;
  border: none;
  padding: 15px;
}

button:active {
  background: blue;
}

button:hover {
  border-collapse: collapse;
  text-align: center;
  color: #ffffff;
  background-color: #ad0f0f;
  border-radius: 0px;
}

button:focus {
  border-collapse: collapse;
  text-align: center;
  color: #ffffff;
  background-color: #ad0f0f;
  border-radius: 0px;
}

<table style="width:100%">
  <tr>
    <td><button type="button">1</button></td>
    <td><button type="button">2</button></td>
    <td><button type="button">3</button></td>
    <td><button type="button">4</button></td>
    <td><button type="button">5</button></td>
    <td><button type="button">6</button></td>
    <td><button type="button">7</button></td>
    <td><button type="button">8</button></td>
    <td><button type="button">9</button></td>
    <td><button type="button">10</button></td>
  </tr>
</table>

uj5u.com熱心網友回復：

這是一個使用示例<input type="radio">：

.rating {
  display: flex;
  gap: 15px;
}

.rating label {
  flex: 1 1 auto;
  cursor: pointer;
}

.rating span {
  background-color: #8e95a2;
  padding: 15px;
  display: flex;
  align-content: center;
  justify-content: center;
}

.rating input {
  display: none;
}

.rating input:checked   span {
  background-color: blue;
  color: white;
}

<p>How satisfied were you overall?</p>
<div class="rating">
  <label for="rate-1">
    <input type="radio" id="rate-1" name="rate" value="1" />
    <span>1</span>
  </label>
  <label for="rate-2">
    <input type="radio" id="rate-2" name="rate" value="2" />
    <span>2</span>
  </label>
  <label for="rate-3">
    <input type="radio" id="rate-3" name="rate" value="3" />
    <span>3</span>
  </label>
  <label for="rate-4">
    <input type="radio" id="rate-4" name="rate" value="4" />
    <span>4</span>
  </label>
  <label for="rate-5">
    <input type="radio" id="rate-5" name="rate" value="5" />
    <span>5</span>
  </label>
  <label for="rate-6">
    <input type="radio" id="rate-6" name="rate" value="6" />
    <span>6</span>
  </label>
  <label for="rate-7">
    <input type="radio" id="rate-7" name="rate" value="7" />
    <span>7</span>
  </label>
  <label for="rate-8">
    <input type="radio" id="rate-8" name="rate" value="8" />
    <span>8</span>
  </label>
  <label for="rate-9">
    <input type="radio" id="rate-9" name="rate" value="9" />
    <span>9</span>
  </label>
  <label for="rate-10">
    <input type="radio" id="rate-10" name="rate" value="10" />
    <span>10</span>
  </label>
</div>

<p>Name:</p>
<p><input type="text" name="name"></p>
<p><button type="button">Submit</button></p>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/425250.html

標籤：html css 按钮

上一篇：VisualStudio2017VB：如何讓兩個按鈕互動

下一篇：Tkinter標簽和按鈕未呈現