Небольшой вопрос, но не может найти способ решить эту небольшую проблему. У меня есть html-форма
<div id="todolist">
<span class="add-on">OK</span>
<input class="addtodo" placeholder="New todo task" name="TITLE" type="text" >
</div>
в CSS
#post-todo span{
color:#aaa;
}
Я хочу изменить color:#333
когда сфокусирован на input
, как это сделать?
К сожалению, с чистым css не удается изменить стиль span
при фокусировке input
. Использование селектора :focus
работает только для дочерних элементов сфокусированного.
Но есть довольно простой javascript метод jquery:
$("#post-todo .addtodo").focus(function(){
$("#post-todo .add-on").css("color", "#333");
})
$("#post-todo .addtodo").blur(function(){
$("#post-todo .add-on").css("color", "#aaa");
})
См. Здесь: http://jsfiddle.net/BEeNa/
используйте CSS:focus selector
ниже.
input:focus
{
background-color:yellow;
color:blue;
}
Для предположим, что ваш OK
span
будет помещен после input
, то ниже код будет работать без помощи вас на JQuery. Только CSS
будет делать трюк.
<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;
}
Символ +
в CSS используется для совпадения любого элемента, которому предшествовал предшествующий элемент.
Рассматривать
E + F
{
// code
}
Затем Matches any F element immediately preceded by a sibling element E.
Вот демонстрация http://jsfiddle.net/UxZXN/
input:focus
будет влиять только на тег input
, но не на тег span