В этом руководстве мы узнаем, как отключить поле ввода с помощью CSS. Итак, начнем!
Как отключить поле ввода с помощью CSS?
В CSS события отключаются с помощью « указатели-события ' имущество. Итак, сначала узнайте о свойстве pointer-events.
Что такое свойство CSS «pointer-events»?
“ указатели-события » управляют тем, как HTML-элементы реагируют или ведут себя на событие касания, например события щелчка или касания, активное состояние или состояние наведения, а также то, виден ли курсор или нет.
Синтаксис
Синтаксис событий-указателей выглядит следующим образом:
указатели-события : авто | никто ;
Вышеупомянутое свойство принимает два значения, например « авто ' а также ' никто ”:
- авто: Он используется для выполнения событий по умолчанию.
- никто: Он используется для отключения событий.
Направляйтесь к данному примеру.
Пример 1: Добавление поля ввода с помощью CSS
В этом примере сначала мы создадим div и добавим к нему заголовок и поле ввода. Затем установите тип ввода как « текст » и установите его значение как « Введите ваше имя ».
HTML
< див >< центр >
< h1 > Отключить поле ввода < / h1 >
< вход тип знак равно 'текст' ценность знак равно 'Введите ваше имя' >
< / центр >
< / див >
После этого перейдите к CSS и стилизуйте div, установив цвет фона как « RGB(184, 146, 99) ' и высота как ' 150 пикселей ».
CSS
див {фон- цвет : RGB ( 184 , 146 , 99 ) ;
высота : 150 пикселей;
}
Вывод вышеописанного кода приведен ниже. Здесь мы видим, что наше поле ввода в настоящее время активно и принимает ввод от пользователя:
Теперь перейдите к следующей части, в которой мы используем значение « указатели-события «собственность как» никто ».
Пример 2. Отключение поля ввода с помощью CSS
Теперь мы будем использовать « вход », чтобы получить доступ к элементу , добавленному в файл HTML, и установить значение событий указателя как « никто ”:
вход {указатели-события : никто ;
}
Как только вы реализуете вышеуказанное свойство « указатели-события ' с ' никто », текст поля ввода будет недоступен для редактирования, что указывает на то, что наше поле ввода отключено:
Вот и все! Мы объяснили способ отключения поля ввода с помощью CSS.
Вывод
Чтобы отключить поле ввода в HTML, « указатели-события используется свойство CSS. Для этого добавьте поле ввода и установите значение событий указателя как « никто », чтобы отключить поле ввода. В этом руководстве мы объясним метод отключения поля ввода с помощью CSS и приведем его пример.