How to change background color of table row (tr) when input is ":focus"?

Question

My HTML: <tr><td>Text</td><td><input type="text" value=""></td></tr>

My CSS: input:focus tr{ background-color:#fff;}

I want to highlight the row in white when I'm writing text in the input field. I know "tr" is before "input", but is this possible to do in any way?

Thanks a bunch

Answer 1

No, sadly. See: Complex CSS selector for parent of active child

Here's how you could do it, though: http://jsfiddle.net/minitech/udzcp/

Answer 2

Using JQuery, it is very possible. Observe:

HTML

<table border="1" cellpadding="20">
    <tr>
        <td>Text</td>
        <td height="50" width="100" id="somename"><input type="text" value="" id="mirza"></td>
    </tr>
    <tr><td>&nbsp;</td><td>&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
    <tr><td>a&nbsp;</td><td>1&nbsp;</td></tr>
</table>

CSS

.highlightedRow { background-color: orange; }

Jquery

$('input').focus(function() {
    $(this).parent().parent().addClass('highlightedRow');
});

$('input').blur(function() {
    $(this).parent().parent().removeClass('highlightedRow');
});

Answer 3

Sadly, there's no way to style the parent element with CSS, so you'll have to use javascript.