如何使按钮保持选中状态？

Question

当我点击页面上的任何其他位置时，我网站上的评级按钮会丢失状态。

如何让它们保持选中状态（红色）？请看下面的截图：

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>

Answer 1

这是一个使用 <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>

如何使按钮保持选中状态？

How to make buttons stay selected?

html

css

button