CSS :checked - change background

Question

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>

Nope, you'll have to use javascript for that. CSS cannot manipulate parent's properties (yet). — KBN, May 03 '12 at 17:02
There is no such selector as `:selected` in CSS. Did you mean `:checked`? — BoltClock, May 03 '12 at 17:08

0b10011 · Accepted Answer · 2014-12-18T17:53:29.343

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.

edited Dec 18 '14 at 17:53

answered May 03 '12 at 17:03

0b10011

17,120
3
62
80

2

And "quite some time" can mean either "in a couple of years" or "never". Don't hold your breath! – BoltClock May 03 '12 at 17:09

CSS :checked - change background

Example

1 Answers1

Linked

Related