Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS :checked - change <td> background

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>
like image 401
John Avatar asked May 27 '26 16:05

John


1 Answers

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.

like image 178
0b10011 Avatar answered May 30 '26 06:05

0b10011



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!