Change color of when element inside is in focus

Question

I want to change the color of tr element when user select a text box inside it. The focus pseudo-class is not working with it. ~~Can this be achieved without JavaScript ?~~

html:

<table>
<tr>
    <td>Name</td><td><input type="text" name="name"></td>
</tr>
</table>

CSS:

tr:focus
{
    background:yellow;
}

Update1:
Looks like there is no CSS only method. What is the easiest way to do this using JavaScript ?

It would be nice if you use this on input:focus this will work — Jack, Apr 15 '12 at 08:11
Yes, focus gives nice effect with input but I wan't to highlight whole row. — Aamir Rizwan, Apr 15 '12 at 08:32

score 12 · Answer 1 · answered Jan 18 '19 at 18:12

12

What about using :focus-within...

<table>
  <tr>
    <td>Name</td>
    <td><input type="text" name="name"></td>
  </tr>
</table>

CSS:

tr:focus-within {
  background:yellow;
  }

Fiddle

What helped me. As the chosen answer did not work for me.

answered Jan 18 '19 at 18:12

serverjohn

360
1
4
10

@Aamir Rizwan This should be the selected answer for the CSS-only solution. – user1717828 Mar 15 '20 at 18:41

Zeta · Accepted Answer · 2013-06-05T07:10:16.333

No. There's no subject selector in CSS3, there will be one in CSS4 though.

EDIT:

A pure JavaScript solution could be

var i;
var inputs = document.querySelectorAll("tr > td > input");
for(i = 0; i < inputs.length; ++i){
    inputs[i].addEventListener('focus',function(e){
        this.parentNode.parentNode.className += ' highlight';        
    });
    inputs[i].addEventListener('blur',function(e){
        this.parentNode.parentNode.className = this.parentNode.parentNode.className.replace(/\s*highlight\s*/ig,' ');
    });
}

However, this won't work in IE≤7, as versons prior 8 don't know document.querySelectorAll (demonstration). If you want a care-free cross-browser solution you could use jQuery and the following code (demonstration):

$("tr > td > input").focus(function(e){
    $(this).parent().parent().addClass('highlight');
}).blur(function(e){
    $(this).parent().parent().removeClass('highlight');
});

Don't forget to add a class tr.highlight to your CSS. Keep in mind that jQuery will drop support of old browsers in future releases (see Browser Support), so you'll have to use jQuery 1.x for IE ≤8.

score 2 · Answer 3 · answered Apr 15 '12 at 11:01

It is technically possible to make a tr element focusable, on sufficiently new browsers, by using a tabindex attribute on it, e.g. <tr tabindex="1">.

However, the method of focusing is browser-dependent, and focusable table rows can be a usability nightmare. For example, both on IE and on Firefox, the row is focused on when the TAB key is used suitably, but a focused row does not take input. The use would need to hit TAB again to get to the input field. On Firefox, but not on IE, the row can also be focused on by clicking, though not by clicking on the input field (since that would focus on that field). If you use label markup, as recommendable for usability and accessibility, e.g.

<table>
<tr tabindex="1">
    <td><label for="name">Name</label></td>
    <td><input type="text" name="name" id="name"></td>
</tr>
</table>

… then clicking on the label focuses on the input field (one of the reasons for using label markup!), not on the row element.

score 0 · Answer 4 · answered Apr 15 '12 at 08:06

0

No, you can't without JavaScript.

answered Apr 15 '12 at 08:06

ezakto

3,174
22
27

It's possible, there's an answer: https://stackoverflow.com/a/54259425/409102 – kravemir Jan 07 '21 at 16:48
Well, focus-within wasn't around in 2012 ;) – ezakto Jan 11 '21 at 01:32

score 0 · Answer 5 · answered Apr 15 '12 at 09:10

0

Was just about to say that: http://jsfiddle.net/qHmGe/

answered Apr 15 '12 at 09:10

Claude Vedovini

2,421
21
19

Include the solution in the answer's text, not in external links. Or, duplicate essential content of external links, for preservation purposes. – kravemir Jan 07 '21 at 16:49

Change color of when element inside is in focus

5 Answers5

Linked