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

Как изменить цвет подсказки placeholder, цвет placeholder по умолчанию. Для 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 заменен на красный:

Всего комментариев : 0Comments+ 2.0

1000

+ =

Отправить