CODEWITHSUNDEEP
csscss-selectors
Darryl Hein
Darryl Hein

Reputation: 145127

Change table row colour when checkbox is checked using CSS3 selectors?

Is there a way to change the colour of a row in a table when a checkbox in the row is checked using only CSS selectors?

I have the following, but it changes the colour of the checkbox, not the table cells:

.table_class tr td.column0 input[type="checkbox"]:checked { background-color:#f00; }

Upvotes: 3

Views: 2549

Answers (2)

2ne
2ne

Reputation: 5996

You could use a little bit of JS? This would act like a checkbox, without having to use a checkbox. DEMO

$("table tr").click(function() {
   $("table tr").css("background", "red"); //reset to original color
   $(this).css("background", "blue"); //apply the new color
});

Upvotes: 3

Sarfraz
Sarfraz

Reputation: 382909

AFAIK, that's not possible with pure CSS to work out both conditions of checkbox. This won't work in IE < 9 either. You will have to resort to javascript for that.

Upvotes: 2

Related Questions