Placeholder Color CSS: Tips and Tricks

Placeholder color в CSS используется для установки цвета текста заполнителя (плейсхолдера) в текстовых полях и текстовых областях.

Для установки цвета заполнителя, можно использовать псевдокласс ::placeholder или свойство placeholder в селекторе, связанном с текстовым полем или текстовой областью. Примеры приведены ниже:

1. Используя псевдокласс ::placeholder:

/* Для всех инпутов типа text */
input[type="text"]::placeholder {
  color: red;
}
/* Для текстового поля с id="myInput" */
#myInput::placeholder {
  color: blue;
}

2. Используя свойство placeholder в селекторе:

/* Для всех инпутов типа text */
input[type="text"] {
  placeholder: red; /* fallback для старых браузеров */
  color:red;
}
/* Для текстового поля с id="myInput" */
#myInput {
  placeholder: blue; /* fallback для старых браузеров */
  color: blue;
}

Оба подхода позволяют установить цвет текста заполнителя на странице. В первом примере, мы используем псевдокласс ::placeholder, чтобы выбрать элементы с типом текст и установить цвет текста. Во втором примере, мы используем свойство placeholder вместе с селектором текстовых полей и текстовых областей, чтобы установить цвет текста заполнителя.

Однако, следует учесть, что поддержка псевдокласса ::placeholder и свойства placeholder может различаться у разных браузеров, поэтому для обеспечения совместимости с различными версиями и типами браузеров, рекомендуется использовать оба подхода и задавать fallback-значение для более старых браузеров.

Например, во втором примере мы указали fallback-значение `placeholder: red;` для поддержки старых браузеров, которые не поддерживают свойство placeholder.