Il campo di input viene utilizzato per creare moduli e prendere input dall'utente. Gli utenti possono riempire il campo di input in base al tipo di input. Ma a volte è necessario disabilitare il campo di input per soddisfare qualsiasi condizione preliminare, come la selezione di una casella di controllo. In quella situazione, è necessario disabilitare il campo di input.

In questa guida, otterremo una comprensione di come disabilitare il campo di input usando CSS. Quindi, iniziamo!

Come disabilitare un campo di input usando CSS?

In CSS, gli eventi sono disabilitati usando il "Eventi di puntatore" proprietà. Quindi, prima, impara a conoscere la proprietà puntatore-eventi.

Cos'è la proprietà CSS "puntatore-eventi"?

IL "Eventi di puntatore"Controlla come gli elementi HTML rispondono o si comportano all'evento touch, come eventi Click o Tocca, stati attivi o hover e se il cursore è visibile o no.

Sintassi
La sintassi degli eventi puntanti è data come segue:

Puntatore-Event: Auto | Nessuno;

La proprietà sopra menzionata richiede due valori, come "auto" E "nessuno":

• auto: Viene utilizzato per eseguire eventi predefiniti.
• nessuno: È utilizzato per disabilitare gli eventi.

Dirigiti verso l'esempio dato.

Esempio 1: aggiunta di un campo di input usando CSS

In questo esempio, in primo luogo, creeremo un div e aggiungeremo un campo di intestazione e input ad esso. Quindi, imposta il tipo di input come "testo"E imposta il suo valore come"Inserisci il tuo nome".

Html

Disabilita un campo di input

Successivamente, spostati sul CSS e modella il Div impostando il suo colore di sfondo come "RGB (184, 146, 99)"E altezza come"150px".

CSS

div
Background-color: RGB (184, 146, 99);
Altezza: 150px;

L'output del codice sopra descritto è riportato di seguito. Qui, possiamo vedere che il nostro campo di input è attualmente attivo e sta accettando l'input dell'utente:

Ora, passa alla parte successiva in cui utilizziamo il valore di "Eventi di puntatore"Proprietà come"nessuno".

Esempio 2: disabilitare un campo di input usando CSS

Ora useremo "ingresso"Per accedere all'elemento aggiunto nel file HTML e impostare il valore di puntatore-eventi come"nessuno":

ingresso
Event puntatore: nessuno;

Una volta implementata la proprietà sopra dichiarata "Eventi di puntatore" con "nessuno"Valore, il testo del campo di input non sarà modificabile, il che indica che il nostro campo di input è disabilitato:

Questo è tutto! Abbiamo spiegato il metodo di disabilitazione del campo di input usando CSS.

Conclusione

Per disabilitare un campo di input in un HTML, il “Eventi di puntatore"La proprietà del CSS viene utilizzata. Per fare ciò, aggiungi un campo di input e imposta il valore degli eventi puntanti come “nessuno"Per disabilitare il campo di input. In questa guida, spieghiamo il metodo di disabilitazione di un campo di input utilizzando CSS e ne forniamo un esempio.