style span when focused on form input - html

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?

Answer 1

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/

Answer 2

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/

Answer 3

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>