Grid, Flex, JS Solution

Community feedback

• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Dennis,

  How do I keep the button highlighted after clicking?

  You used <button> element for the number button. Button doesn't have on and off state, so it's difficult to make the button highlighted after clicking. Though I think it could be achieved by javascript, I'll consider it as hacking. The best element you could use for that is <radio>. It has on and off state (checked or unchecked), so when the user click a number, it becomes checked, and you can give it the style that you want.

  Here's an example.

  <input type="radio" id="rate1" name="rate" value="1">
  <label for="rate1">1</label>
  <input type="radio" id="rate2" name="rate" value="2">
  <label for="rate2">2</label>
  <input type="radio" id="rate3" name="rate" value="3">
  <label for="rate3">3</label>
  <input type="radio" id="rate4" name="rate" value="4">
  <label for="rate4">4</label>
  <input type="radio" id="rate5" name="rate" value="5">
  <label for="rate5">5</label>
  

  You could then hide the input and style the label according to your need.

  input[type="radio"] {
      display: none;
  }
  input[type="radio"] + label {
      font-weight: var(--fw-h1);
      width: 40px;
      height: 40px;
      border: none;
      border-radius: 100%;
      color: var(--Light-Grey);
      background-color: hsl(213deg 20% 18%);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
  }
  input[type="radio"] + label:hover {
      color: var(--White);
      background-color: var(--Orange);
  }
  input[type="radio"]:checked + label {
      color: var(--White);
      background-color: rgb(126 135 150);
  }
  

  Hope this helps. Happy coding!

  1