Intereting Posts

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

Как изменить цвет заполнителя при фокусировке поля ввода? Я использую этот 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/