Как изменить цвет текста placeholder

Цветной placeholder в input

1. Цвет placeholder по умолчанию
2. Как изменить цвет placeholder на другой(например:на красный)
3. Скачать можно здесь

Скопировать ссылку



Цвет placeholder по умолчанию

Естественно, что у подсказки placeholder цвет по умолчанию должен быть! и он есть -> черный!

Но, что делать если мы хотим заменить стандартный цвет placeholder на какой-то другой!?


Пример placeholder по умолчанию:

И где взять цвета для использования в покраске !?

Есть отдельная страница с предопределенными цветами.
Или же можно подобрать через генератор цвета

Скопировать ссылку



Как изменить цвет placeholder на другой(например:на красный)

Для данного параграфа у нас есть:

Пример изменения цвета placeholder на отдельной странице
Скачать приведенный пример изменения цвета placeholder -> здесь


Для того, чтобы продемонстрировать изменение цвета placeholder нам понадобится поле ввода input

В инпуте прописываем атрибут placeholder, с каким-то текстом :

placeholder="Здесь текст внутри инпута"

Далее добавим какой-то класс нашему инпуту:

<input class="example_1" placeholder="Здесь текст внутри инпута">

Теперь зададим цвет placeholder-у :

input.example_1::-webkit-input-placeholder {color:red ; opacity:1;}/* webkit */
input.example_1::-moz-placeholder {color:red ; opacity:1;}/* Firefox 19+ */
input.example_1:-moz-placeholder {color:red ; opacity:1;}/* Firefox 18- */
input.example_1:-ms-input-placeholder {color:red ; opacity:1;}/* IE */


Результат -> цвет placeholder заменен на красный:

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---