Як змінити колір атрибуту placeholder у тегові input [CSS]

Привіт:) У цьому пості покажу, як просто змінити колір атрибуту placeholder у тегові <input>.

Нехай є текстове поле:

<input type="text" placeholder="Placeholder text...">

У більшості браузерів placeholder-текст сірий за замовчуванням. Щоб його змінити, використовуйте селектор ::placeholder. Firefox додає меншу непрозорість до цього атрибута, тому необхідно використати властивість opacity: 1, щоб змінити його поведінку.

input[type="text"]::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: blue;
  opacity: 1; /* Firefox */
}

input[type="text"]:-ms-input-placeholder { /* Internet Explorer 10-11 */
  color: blue;
}

input[type="text"]::-ms-input-placeholder { /* Microsoft Edge */
  color: blue;
}

input[type="text"]::-webkit-input-placeholder { 
  color: blue;
}

input[type="text"]::-moz-placeholder {
  color: blue;
}

У коді замість blue підставте свій колір.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *