диапазон стиля, когда фокусируется на вводе формы

0

Небольшой вопрос, но не может найти способ решить эту небольшую проблему. У меня есть 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, как это сделать?

  • 0
    Это возможно с чистым CSS, но только если вы ставите span после input.Check stackoverflow.com/questions/6910049/…
  • 0
    Ладно, интересно, я не знал этот метод, хотя он и логичен. Но это не совместимо с браузером, поэтому, к сожалению, бесполезно в производстве.
Теги:

2 ответа

2
Лучший ответ

К сожалению, с чистым 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/

Поделиться
3

используйте 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/

Поделиться
  • 0
    input:focus будет влиять только на тег input , но не на тег span
  • 0
    вместо ввода вы можете использовать тег.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню