CODE

Css placeholder color или как изменить цвет placeholder css

Содержание

Доброго времени, коллеги! Бывало ли у вас такое, что заказчик говорит что плохо виден текст в полях для заполнения формы? Более того, кто ведет свои блоги, знает, что цвет текста в input в комментариях всегда какой-то нечитаемый, блеклый, а браузер Mozilla и вовсе его «размазывает».

Css placeholder color

И поэтому сегодня, мы рассмотрим такой вопрос как изменить цвет placeholder при помощи css. Как по мне, решение внизу лучшее так как оно более валидно и не требует особых знаний в css, к тому же, добавить свой color к placeholder сможет каждый.

HTML: стандартная конструкция

<form>
   <input class="in-put" type="text" placeholder="Ваше имя">
   <input class="in-put" type="text" placeholder="Ваш телефон">
   <input type="submit" value="Отправить заявку">
</form>

Префиксы

Для всех современных браузеров достаточно использовать такую конструкцию.

.in-put::placeholder {color: #000000;}

Но если делаете проект на заказ, то рекомендую добавить еще несколько строк. Важно: не объединяйте эти стили вместе с вашими, уже существующими, а прописывайте так как они есть в примере ниже.

/* Современные браузеры
   ----------------------------  */
.in-put::placeholder {color: #000000;}

/* WebKit, Edge
   ----------------------------  */
.in-put::-webkit-input-placeholder {color: #000000;}

/* Edge
   ----------------------------  */
.in-put::-ms-input-placeholder {color: #000000;}

/* Firefox 4-18
   ----------------------------  */
.in-put:-moz-placeholder {color: #000000;opacity: 1;}

/* Firefox 19+
   ----------------------------  */
.in-put::-moz-placeholder {color: #000000;opacity: 1;}

/* IE 10-11
   ----------------------------  */
.in-put:-ms-input-placeholder {color: #000000;}

Зачем столько кода, спросите вы! ~~Много не мало!~~ А если кроме шуток, то на данный момент этого еще нет в стандартах, и поэтому, в каждом браузере поддержка стилизации placeholder реализована по-своему.

Читайте также:

UL LI: списки в две и более колонок только с помощью css

Трюк: изменение прозрачности

Вообще, существует несколько фишек по стилизации и «анимации» placeholder’а, но если есть необходимость чтобы проект прошел проверку на валидность, то не стоит такими фишками баловаться.

/* Изменение прозрачности при фокусе
   ----------------------------  */
.in-put:focus::placeholder {opacity: 0;transition: opacity 0.3s ease;}

Плагин

А если уж совсем хочется или возможно требуется в разработке проекта, то обратите внимание на плагин по ссылке ниже. Он добавляет к полю лишь label имитируя плейсхолдер, который однозначно можно кастомизировать как душе угодно. Больше того, это даже будет работать в сафари, ~~черт его побери~~…