Как изменить цвет заполнителя ввода с помощью CSS

Kak Izmenit Cvet Zapolnitela Vvoda S Pomos U Css



Заполнитель ввода указывает ожидаемый ввод от пользователя, давая подсказки или описания. Большинство подсказок и описаний исчезают, когда они указывают что-то в поле ввода. По умолчанию цвет заполнителя ввода серый; однако в некоторых случаях важно изменить цвет заполнителя ввода, чтобы улучшить его видимость.

В этом руководстве мы объясним различные способы изменения цвета заполнителя ввода с помощью 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.