El campo de entrada se usa para hacer formularios y tomar la entrada del usuario. Los usuarios pueden llenar el campo de entrada de acuerdo con el tipo de entrada. Pero a veces, debe deshabilitar el campo de entrada para cumplir con cualquier condición previa, como seleccionar una casilla de verificación. En esa situación, debe deshabilitar el campo de entrada.

En esta guía, obtendremos una comprensión de cómo deshabilitar el campo de entrada utilizando CSS. Vamos a empezar!

Cómo deshabilitar un campo de entrada usando CSS?

En CSS, los eventos se deshabilitan utilizando el "eventos de puntero" propiedad. Entonces, primero, aprenda sobre la propiedad de Pointer-Events.

¿Qué es la propiedad CSS "Pointer-Events"??

El "eventos de puntero"Controle cómo los elementos HTML responden o se comportan al evento táctil, como eventos de clic o toque, estados activos o desplazados, y si el cursor es visible o no.

Sintaxis
La sintaxis de Pointer-Events se da de la siguiente manera:

Pointer-Events: Auto | Ninguno;

La propiedad de mención anterior toma dos valores, como "auto" y "ninguno":

• auto: Se usa para realizar eventos predeterminados.
• ninguno: Se utiliza para deshabilitar los eventos.

Dirígete hacia el ejemplo dado.

Ejemplo 1: Agregar un campo de entrada usando CSS

En este ejemplo, en primer lugar, crearemos un DIV y le agregaremos un campo de encabezado y entrada. Luego, establezca el tipo de entrada como "texto"Y establece su valor como"Introduzca su nombre".

Html

Deshabilitar un campo de entrada

Después de eso, muévase al CSS y diseñe el DIV estableciendo su color de fondo como "RGB (184, 146, 99)"Y la altura como"150px".

CSS

div
Color de fondo: RGB (184, 146, 99);
Altura: 150px;

La salida del código descrito anteriormente se proporciona a continuación. Aquí, podemos ver que nuestro campo de entrada está actualmente activo y acepta la entrada del usuario:

Ahora, pase a la siguiente parte en la que usamos el valor del "eventos de puntero"Propiedad como"ninguno".

Ejemplo 2: Deshabilitar un campo de entrada usando CSS

Ahora usaremos "aporte"Para acceder al elemento agregado en el archivo HTML y establecer el valor de los eventos de puntero como"ninguno":

aporte
Pointer-Events: Ninguno;

Una vez que implementa la propiedad mencionada anteriormente "eventos de puntero" con "ninguno"Valor, el texto del campo de entrada no será editable, lo que indica que nuestro campo de entrada está deshabilitado:

Eso es todo! Hemos explicado el método para deshabilitar el campo de entrada usando CSS.

Conclusión

Para deshabilitar un campo de entrada en un HTML, el "eventos de punteroSe utiliza la propiedad del CSS. Para hacerlo, agregue un campo de entrada y establezca el valor de los eventos de puntero como "ninguno"Deshabilitar el campo de entrada. En esta guía, explicamos el método de deshabilitar un campo de entrada usando CSS y proporcionamos un ejemplo de ella.