0

I am creating a checkboxes from the ts file in angular for seat selection but the background color of checkbox is not changing after checking the checkboxes.

My ts file function:

generateSeats(): void {
    const seats = document.querySelector('.all-seats');
    if (!seats) return;
    for (let i = 0; i \<= 59; i++) 
    const randint = Math.floor(Math.random() \* 2);
        const booked = randint === 1 ? 'booked' : '';
        seats.insertAdjacentHTML(
          'beforeend',
          `<input type="checkbox" name="tickets" id="s${i + 2}"/>         
          <label for="s${i + 2}" class="seat ${booked} grid"></label>`
        );
    }
}

My html snippet:

<div class="all-seats" >
  <input type="checkbox" name="tickets" id="s1" />

  <label for="s1" class="seat booked size"></label>
</div>

One of my css attempts:

.all-seats input:checked + label {

    background-color: rgb(28, 185, 120) !important;
    outline: none;

}

Please help me change the background color of checkbox.

Dhia
  • 328
  • 2
  • 18
Maddineni Venkateswarlu
  • 1
  • 1
  • Does this answer your question? [How to style a checkbox using CSS](https://stackoverflow.com/questions/4148499/how-to-style-a-checkbox-using-css) – Gerard Jul 29 '23 at 07:43

1 Answers1

1

You can use the new CSS accent-color property to change the background colour of the checkbox:

.all-seats input[type="checkbox"]:checked {
  accent-color: rgb(28, 185, 120) !important;
  outline: none;
}
Muhammad Qasim
  • 69
  • 3