style span when focused on form input

Question

Small question but, cannot find method to solve this little problem. I have html form

 <div id="todolist">
      <span class="add-on">OK</span>
      <input class="addtodo" placeholder="New todo task" name="TITLE"  type="text" >
 </div>

in CSS

 #post-todo span{   
     color:#aaa;
 }

I want to change color:#333 when focused on input, how do this?

It's possible with pure css, but only if you put the span after the input.Check http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling — erdimeola, Dec 14 '13 at 13:34
Okay interesting, didn't know that method, even though its kind of logical. But its not Browser compatible so unfortunately useless in production. — greenish, Dec 14 '13 at 13:42

score 3 · Answer 1 · edited Mar 13 '16 at 17:58

3

use CSS:focus selector something like below.

     input:focus
     {
        background-color:yellow;
        color:blue;
     }

For suppose your OK span would be placed after the input then the below code will work without the help you of the jQuery. Only the CSS will do the trick.

<div id="todolist">
      <input class="addtodo" placeholder="New todo task" name="TITLE"  type="text" >
      <span class="add-on">OK</span> <!-- span must be after input-->
 </div>

 .addtodo:focus + .add-on
 {
    background-color:yellow;
    color:blue;
 }

The + in the CSS is used to Matches any element immediately preceded it by a sibling element.

Consider

E + F
{
    // code
}

Then Matches any F element immediately preceded by a sibling element E.

Here is the Demo http://jsfiddle.net/UxZXN/

edited Mar 13 '16 at 17:58

Alex KeySmith

16,657
11
74
152

answered Dec 14 '13 at 13:28

Gourav

1,765
2
15
16

`input:focus` will affect only on `input` tag, but not `span` tag – user3054630 Dec 14 '13 at 13:31
instead of input u can use the tag. – Gourav Dec 14 '13 at 13:33
This answer is nicer than the jQuery solution. I've tweaked your answer to make it more obvious the span must be afterwards in the DOM. – Alex KeySmith Mar 13 '16 at 17:59

score 2 · Accepted Answer · edited Mar 13 '16 at 18:52

Unfortunately it is not possible with pure css to change the span styling when focussing the input. Using the :focus selector works only for child elements of the focused one.

But there is a fairly simple javascript jquery method :

$("#post-todo .addtodo").focus(function(){
    $("#post-todo .add-on").css("color", "#333");
})

$("#post-todo .addtodo").blur(function(){
    $("#post-todo .add-on").css("color", "#aaa");
})

See here: http://jsfiddle.net/BEeNa/

score 1 · Answer 3 · answered Apr 12 '21 at 07:55

It finally become possible, just a few years later...

It is possible with support of :focus-within.

#todolist:focus-within .add-on { color: #aaa; }

<div id="todolist">
  <span class="add-on">OK</span>
  <input class="addtodo" placeholder="New todo task" name="TITLE"  type="text" >
</div>

style span when focused on form input

3 Answers3