Intereting Posts
Как получить плавающие DIV внутри DIV с фиксированной шириной, чтобы продолжить горизонтально? Bootstrap 3.0: Как иметь текст и ввод на одной строке? Как передать значение переменной между различными html-страницами в javascript Вертикальное выравнивание среднего и центрированного текста поверх изображения Номер типа ввода html5 с шаблоном регулярного выражения в мобильном ASP.NET/HTML: свойство onClick HTML-кода внутри ASP.NET (.cs) Цвет ссылки по умолчанию HTML IE7 игнорирует маржу в div после абсолютного позиционного div Разрыв строки в XML? Вставлять эллипсис (…) в тег HTML, если контент слишком широк Как поместить тег изображения и диапазона в один и тот же div, чтобы отобразить их содержимое на одной строке iPhone-клавиатура в UIWebView не уходит Как создать скользящий DIV по щелчку? Использование Java-кода во встроенном HTML вместо JavaScript? Тип входа FILE multiple – добавлять файлы последовательно

Как изменить цвет закладки на фокус?

Как изменить цвет заполнителя при фокусировке поля ввода? Я использую этот css для установки цвета по умолчанию, но как изменить его на фокус?

::-webkit-input-placeholder { color: #999; } /* Firefox  19 */ ::-moz-placeholder { color: #999; } /* Internet Explorer 10 */ :-ms-input-placeholder { color: #999; } 

Solutions Collecting From Web of "Как изменить цвет закладки на фокус?"

Попробуйте это, это должно работать:

 input::-webkit-input-placeholder { color: #999; } input:focus::-webkit-input-placeholder { color: red; } /* Firefox < 19 */ input:-moz-placeholder { color: #999; } input:focus:-moz-placeholder { color: red; } /* Firefox > 19 */ input::-moz-placeholder { color: #999; } input:focus::-moz-placeholder { color: red; } /* Internet Explorer 10 */ input:-ms-input-placeholder { color: #999; } input:focus:-ms-input-placeholder { color: red; } 

Вот пример: http://jsfiddle.net/XDutj/27/

В дополнение к ответу Pranav я уточнил код с совместимостью textarea:

 ::-webkit-input-placeholder { color: #999; } :-moz-placeholder { color: #999; } :focus::-webkit-input-placeholder { color: #ccc; } :focus:-moz-placeholder { color: #ccc; }​ 

Попробуй это:

HTML

  

CSS

 input[placeholder]:focus { color: red; } 

Я нашел это решение с помощью JQuery:

  $('input[type="text"]').each(function(){ $(this).focus(function(){ $(this).addClass('input-focus'); }); $(this).blur(function(){ $(this).removeClass('input-focus'); }); }); 

с этим css:

 .input-focus::-webkit-input-placeholder { color: #f00; } .input-focus:-moz-placeholder { color: #f00; } .input-focus:-ms-input-placeholder { color: #f00; } 

Используйте звездочку * чтобы выбрать все

 *::-webkit-input-placeholder { color: #999; } *:-moz-placeholder { color: #999; } *::-moz-placeholder { color: #999; } *:-ms-input-placeholder { color: #999; } 

Следующие работали для меня:

 input:focus::-webkit-input-placeholder { color: red; } 

Из Firefox 19: псевдоclass classа -moz-placeholder, который соответствует элементам формы с атрибутом placeholder, был удален, и вместо этого был добавлен псевдо-элемент :: -moz-placeholder.

 input:focus::-moz-placeholder { color: transparent; } 

Вы можете создать анимационный заполнитель материала, который сжимается сверху, когда поле ввода сосредоточено.

 

В основном поле метки будет действовать как заполнитель. Мы можем сделать это только с помощью css. Разъясняется здесь http://www.voidtricks.com/create-material-design-animated-placeholder/