Цвет 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;
}
Изменено: 25 08 2016
Просмотров: 5043