3

With CSS, is it possible to change the background-color of an entire <tr> based on whether or not an <input type="checkbox"> is checked?

Example

<table>
 <!-- This is the row I want to change the background of... -->
 <tr>
  <td>
   <!-- ...when this is checked -->
   <input type="checkbox" name="cb1" id="cb1" />
  </td>
  <td>Something 1</td>
 </tr>
</table>
John
  • 1,619
  • 8
  • 24
  • 34

1 Answers1

6

Not currently, no. This functionality is being specced (see :has()), but it won't actually be available for public use for quite some time.

 /* Only matches TRs that contain checked INPUTs */
 tr:has(input:checked) {
  background:red;
 }

Note: The example provided is valid according to the current Editor's Draft, but the syntax may change or the functionality may be removed entirely before browser vendors even begin implementing it.

0b10011
  • 18,397
  • 4
  • 65
  • 86