Как добавить или изменить CSS стиль в «input» для «placeholder»

Приветствую читателей блога BlogGood.ru!
Часто в HTML форму в поле «input» прописывают «placeholder».
В «placeholder» вставляют временный текст-подсказку, который исчезнет при вводе текста пользователем.
Так вот, на этот текст-подсказку, который выводится при помощи «placeholder»,  я и покажу, как добавлять свои CSS стили, точнее, покажу, как поменять цвет, размер текста и выбрать другой шрифт.

Начнем!

Если у вас нет готового поля с «placeholder» для примера, я его пропишу (скопируйте себе):

<input ENGINE="text" name="fio" placeholder="Текст placeholder" />

Результат:

Сейчас временный текст-подсказка сероватого цвета. А чтобы придать тексту «placeholder»  свой стиль, нужно прописать всего пару строк.
Откройте CSS и вставьте вот эти строки:

/* для Webkit браузеров (Chrome, Safari, Opera) */
input::-webkit-input-placeholder{
color: #cc0000; /* цвет текста */
font-style: italic; /* наклон текста */
font-weight: bold; /* текст будет жирным */
}

/* для браузеров Mozilla Firefox */
input:-moz-placeholder{
color: #cc0000; /* цвет текста */
font-style: italic; /* наклон текста */
font-weight: bold; /* текст будет жирным */
}

Результат:

Надеюсь, в коде все понятно, там ведь есть подсказки. Но, если возникнут вопросы, пишите…
Удачи!

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

2 Ответов на комментарий - Как добавить или изменить CSS стиль в «input» для «placeholder»

1. Александр

   23.10.2016 в 09:31

   Интересный пост Степан. Полезный в том смысле, что к примеру если есть обязательные поля для заполнения то текст можно выделить красным, ну и плюс звездочку влепить как обычно. Чисто для новичков как сделать так чтоб в одном поле был текст одного цвета а в обязательном другого?! Все просто, добавляем к обязательным полям класс и через него прописываем, а к другим полям добавляем другой класс и опять через него пишем другие стили. Думаю пояснил понятно.
   Спасибо за пост Степа, честно никогда об этом не задумывался.
2. Степан => автор блога

   24.10.2016 в 11:00

   Спасибо, Саша, за комментарий!

Добавить комментарий

Нажмите, чтобы отменить ответ.

Имя (required)

Mail (will not be published) (required)

Сайт

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: css, html, Вебмастеру, для сайта