How to make buttons stay selected?

Question

the rating buttons on my site lose their state when I click on any other place on the page.

How can I make them stay selected (red)? Please see the screenshots below:

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>

I agree with Richard Deeming. Using radio as input will also be easier for you to record the response. This article might be useful [link](https://markheath.net/post/customize-radio-button-css) . — Neom, Feb 08 '22 at 17:33

score 2 · Accepted Answer · answered Feb 08 '22 at 17:39

Here's an example using <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?

1 Answers1