Цвет placeholder на CSS

Решение, как изменить цвет placeholder для элемента формы input или textarea при помощи CSS правил

Чтобы поменять текст подсказки в теге <input> или <textarea>, возьмём для примера простую форму и пропишем для неё правила CSS:

Демонстрация

Пример простой формы:

<form action="#" method="post">
    <div>
      <label for="name">Text Input:</label>
      <input type="text" placeholder="Your name" name="name" id="name" value="" tabindex="1" />
    </div>

    <div>
      <label for="name_2">Text Input 2:</label>
      <input type="text" placeholder="Your name" name="name_2" id="name_2" value="" tabindex="1" />
    </div>  
  
    <div>
      <label for="textarea">Textarea:</label>
      <textarea placeholder="Some text" cols="40" rows="8" name="textarea" id="textarea"></textarea>
    </div>

  <div>
      <label for="textarea">Textarea 2:</label>
      <textarea placeholder="Some text" cols="40" rows="8" name="textarea_2" id="textarea_2"></textarea>
    </div>

  
    <div>
      <input type="submit" value="Submit" />
    </div>
</form>

CSS правила с поддержкой всех браузеров:

::-webkit-input-placeholder {
    color: red;
}
:-moz-placeholder {
    color: red;
}
::-moz-placeholder {
    color: red;
}
:-ms-input-placeholder {
    color: red;
}
Продолжая использовать веб- сайт beta-code.ru, вы даете согласие на обработку файлов cookie, пользовательских данных (сведения о местоположении; тип и версия ОС; тип и версия Браузера; тип устройства и разрешение его экрана; источник откуда пришел на сайт пользователь; с какого сайта или по какой рекламе; язык ОС и Браузера; какие страницы открывает и на какие кнопки нажимает пользователь; ip-адрес) в целях функционирования сайта, проведения ретаргетинга и проведения статистических исследований и обзоров. Если вы не хотите, чтобы указанные данные обрабатывались, покиньте сайт.
Принять