В этом руководстве мы объясним различные способы изменения цвета заполнителя ввода с помощью CSS.
Способ 1: изменить цвет заполнителя ввода с помощью селектора «:: placeholder»
CSS ' ::заполнитель селектор используется для выбора элементов формы с текстом-заполнителем. Его можно использовать для изменения текста заполнителя. Кроме того, этот селектор можно использовать для изменения цвета заполнителя ввода.
Синтаксис
Синтаксис ::placeholder следующий:
:: заполнитель {
цвет : ценность
}
В месте ' ценность », вы можете установить цвет заполнителя ввода в соответствии с нашим выбором.
Давайте перейдем к практическому примеру, где мы изменим цвет заполнителя ввода.
Пример
Чтобы изменить цвет заполнителя ввода, во-первых, мы создадим элемент ввода с помощью тега и установим тип ввода как « текст ». Затем установите текст заполнителя ввода как « Войти ваше имя ».
HTML
< тело >< вход тип знак равно 'текст' заполнитель знак равно 'Введите ваше имя' >
< / тело >
Вывод данного кода:
Цвет заполнителя ввода по умолчанию показан на приведенном выше изображении.
Теперь мы переходим к CSS и используем « ::заполнитель », чтобы получить доступ к тексту заполнителя ввода и установить его цвет как « RGB(17, 0, 255) ».
CSS
:: заполнитель {цвет : RGB ( 17 , 0 , 255 ) ;
}
Как видите, цвет добавленного заполнителя ввода изменился на синий:
Существует еще один способ изменить цвет заполнителя ввода. Давайте проверим это.
Способ 2: изменить цвет заполнителя ввода с помощью элемента псевдокласса «::-webkit-input-placeholder»
“ :: – webkit-ввод-заполнитель Элемент псевдокласса в первую очередь представляет текст-заполнитель элемента формы. Его могут использовать дизайнеры и разработчики тем для настройки внешнего вида текста-заполнителя. Кроме того, с помощью указанного элемента пользователь может изменить цвет заполнителя ввода.
Синтаксис
Синтаксис ::-webkit-input-placeholder выглядит следующим образом:
:: -webkit-ввод-заполнитель {цвет : ценность
}
В месте ' ценность », вы можете установить цвет заполнителя ввода.
Давайте перейдем к примеру, чтобы понять обсуждаемый выше элемент псевдокласса.
Пример
В файле CSS используйте « ::-вебкит-ввод-заполнитель ” элемент псевдокласса и присвойте значение цвета как “ RGB(255, 13, 13) ”:
:::: -webkit-ввод-заполнитель {цвет : RGB ( 255 , 13 , 13 ) ;
}
Выход
Здесь вы можете видеть, что цвет заполнителя ввода по умолчанию изменен.
Вывод
Цвет заполнителя ввода изменяется с помощью кнопки « ::заполнитель селектор и « :: – webkit-ввод-заполнитель элемент псевдокласса. Используя это, вы можете изменить цвет по умолчанию для заполнителя ввода. В этой статье мы объяснили процедуру, связанную с изменением цвета заполнителя ввода с помощью свойств CSS.