CSS :: Псевдоэлемент ::placeholder
Псевдоэлемент ::placeholder
(от англ. placeholder – метка-заполнитель)
позволяет задать стилевое оформление подсказки, созданной атрибутом placeholder. Например,
p::placeholder {блок объявлений}
. Псевдокласс может быть полезен для изменения шрифта и цвета подсказки в поле ввода.
Браузер Microsoft Edge использует псевдоэлемент ::-ms-input-placeholder, а браузер Internet Explorer использует псевдокласс :-ms-input-placeholder.
Селекторы псевдоэлементов выбирают элементы требуемого типа, явно не указанные в дереве элементов html-документа и соответствующие требованиям указанного в селекторе псевдоэлемента, который отделяется от элемента двумя двоеточиями «::».
Синтаксис
<селектор>::placeholder {блок объявлений}
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/::placeholderПримеры
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> /* Подсказку для имени оформим зеленым цветом */ input[placeholder="Иван"]::placeholder{ color: green; } /* Это для Internet Explorer */ input[placeholder="Иван"]:-ms-input-placeholder{ color: green; } /* Это для Microsoft Edge */ input[placeholder="Иван"]::-ms-input-placeholder{ color: green; } /* Подсказку для описания оформим оранжевым цветом */ textarea[placeholder="Кратко о себе"]::placeholder{ color: orange; } /* Это для Internet Explorer */ textarea[placeholder="Кратко о себе"]:-ms-input-placeholder{ color: orange; } /* Это для Microsoft Edge */ textarea[placeholder="Кратко о себе"]::-ms-input-placeholder{ color: orange; } </style> </head> <body> <form action="http://localhost/test/php/script_1.php" method="POST"> <label for="first_name">Имя: </label> <input type="text" name="first_name" placeholder="Иван"><br><br> <textarea name="message" placeholder="Кратко о себе"></textarea><br><br> <button type="reset">Сброс</button> <button type="submit" disabled>Отправить</button> </form> </body> </html>
Пример №1