How to change background-color of a "li" if I put the cursor in an input field inside the "li"?

Question

Is it possible to set the background-color of the li when I put the cursor in a or b or c? I have this list with 100 records and I want the hole row ("li") to show up in another color so it gets more easy to work with the list.

<li id=recordsArray_1>
 <form medthod=post name=fr_1 id=fr_1>
  <input type=text name=a> <input type=text name=b> <input type=text name=c>
  <input type=submit name=b_1 value=ok>
 </form>
</li>

<li id=recordsArray_2>
 <form medthod=post name=fr_2 id=fr_2>
  <input type=text name=a> <input type=text name=b> <input type=text name=c>
  <input type=submit name=b_2 value=ok>
 </form>
</li>

<li id=recordsArray_3>
 <form medthod=post name=fr_3 id=fr_3>
  <input type=text name=a> <input type=text name=b> <input type=text name=c>
  <input type=submit name=b_3 value=ok>
 </form>
</li>
 .etc .... > 100

Not with CSS - See http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — Paulie_D, Feb 04 '14 at 13:17

Mr_Green · Answer 1 · 2014-02-04T13:33:09.963

2

You can have a sibling element to the input elements and make it cover the li with background color on hover.

CSS

input[type=text]:focus~div {
    background-color:red;
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    z-index: -1;
}
li {
    position:relative;
}

jsfiddle

edited Feb 04 '14 at 13:33

answered Feb 04 '14 at 13:24

Mr_Green

36,985
43
143
241

+1 Better to use `:focus` pseudo-class: http://jsfiddle.net/hashem/zX8tH/2/ – Hashem Qolami Feb 04 '14 at 13:27
@HashemQolami yep updated.. – Mr_Green Feb 04 '14 at 13:28
Just make the div `z-index: -1`? – Bergi Feb 04 '14 at 13:30
@Bergi ok got it... :) – Mr_Green Feb 04 '14 at 13:35
+1 for a css solution – Clyde Lobo Feb 04 '14 at 13:36

Leon · Accepted Answer · 2014-02-05T10:31:37.650

0

You can't do this with pure css, you'll need to use javascript / jQuery:

$("input[type='text']").focus(function(){
    $("li").removeClass("background");
    $(this).closest("li").addClass("background");
});

See: http://jsfiddle.net/HF5Tx/

edited Feb 05 '14 at 10:31

answered Feb 04 '14 at 13:22

Leon

1,649
16
33

I can see your jsfiddle working just fine, but I can't make my script work. My li looks like this: #contentLeft li { text-align:left; list-style: none; margin: 0 0 4px -40px; padding: 2px; border: #CCCCCC solid 1px; background-color:#FFFFEF; color:#000; width:1160px; } And the code from you: – user3214817 Feb 04 '14 at 14:59
In your javascript, change $("contentLeft li") to $("#contentLeft li"). And make sure you add a background class in your css, i.e: .background { background-color:red; }. I used the "background" class as an example, you can change it to "active" or "li-active", or something (in both your jQuery code and your CSS of course). – Leon Feb 04 '14 at 15:05
Thank you! Now the lines get red, BUT they all stay red after clicking so I can have many red lines and not only the active as in your example. Have I missed something? – user3214817 Feb 04 '14 at 15:44
Make sure you have the right selector in $("#contentLeft li").removeClass("background"). In your example you missed the "#". Make sure the list-items ("li" elements) are inside an element with the id "contentLeft". Or do $("li").removeClass("background") to target all list-items on the page. – Leon Feb 04 '14 at 18:31
I broke my page down in pieces and the reson it doesn't work is cause I have a table within my
...

user3214817

Feb 05 '14 at 07:32

Try changing $(this).parent().parent().addClass("background"); with $(this).closest("li").addClass("background"); If that doesn't work, please post a Fiddle of your code. – Leon Feb 05 '14 at 08:57

Yes, that works! Thank you. But is it possible to use checkboxes in the same function? – user3214817 Feb 05 '14 at 09:49

EDIT: I doubbled the function and put checkbox in the other and that works. Thank you very much for all your help – user3214817 Feb 05 '14 at 10:04

You're welcome :) Btw you can change $("input[type='text']") to $("input[type='text'], input[type='checkbox']") to target textfields and checkboxes, or just $("input") to target all input elements. – Leon Feb 05 '14 at 10:29

Thank you for all your help:) – user3214817 Feb 05 '14 at 12:56

score 0 · Answer 3 · answered Feb 04 '14 at 13:35

Even though there is no parent selector, you have a hover state on the li triggered by the hover of the children (the hover bubbles).

One posibility is to use that state, and if you want to avoid the change when the cursor is on the li, but not on the inputs, just disable the hover event:

CSS

li {
    position:relative;
    z-index: 1;
    pointer-events: none;
}
li:hover {
    background-color: red;

}
input {
    position: relative;
    z-index: 2;
    pointer-events: all;
}

fiddle

Thanks! But this only works for hoover. I need the row to stay red as long as I have the cursor in a field — user3214817, Feb 04 '14 at 15:04

score 0 · Answer 4 · answered Feb 04 '14 at 13:38

Is it possible to set the background-color of the "li" when I put the cursor in on of its children inputs?

No, unfortunately the :focus selector does not work on the ancestors of the focused element, so you cannot detect that. :active would, but does only flash in the moment of the click.

The :hover selector (applied to the li) could do it, assuming you're using mouse navigation it would have a similar effect - and also help while viewing the table, not only when filling out inputs. However, it doesn't work with keyboard-based navigation.

So you can only resort to JS (using jQuery for an example, same is easily achievable with native DOM):

var $lis = $("li");
$lis.find("input:text").focus(function(e) {
    $lis.css("background-color", "none");
    $(this).closest("li").css("background-color", "red");
});

@user3214817: [Works well for me](http://jsfiddle.net/Yhu87/). — Bergi, Feb 04 '14 at 18:15
Tried again and it works but with the same problem as Leons suggest. All the lines stayes colored after click — user3214817, Feb 05 '14 at 06:49

How to change background-color of a "li" if I put the cursor in an input field inside the "li"?

4 Answers4