In questa guida, acquisiremo una comprensione di come disabilitare il campo di input utilizzando CSS. Quindi, iniziamo!
Come disabilitare un campo di input utilizzando CSS?
In CSS, gli eventi vengono disabilitati utilizzando il ' eventi-puntatore ' proprietà. Quindi, per prima cosa, scopri la proprietà pointer-events.
Che cos'è la proprietà CSS 'pointer-events'?
Il ' eventi-puntatore ” controlla come gli elementi HTML rispondono o si comportano all'evento tocco, come eventi clic o tocco, stati attivi o al passaggio del mouse e se il cursore è visibile o meno.
Sintassi
La sintassi di pointer-events è data come segue:
eventi-puntatore : auto | nessuno ;
La proprietà di cui sopra assume due valori, come “ auto ' e ' nessuno ”:
- auto: Viene utilizzato per eseguire eventi predefiniti.
- nessuno: Viene utilizzato per disabilitare gli eventi.
Dirigiti verso l'esempio fornito.
Esempio 1: aggiunta di un campo di input utilizzando CSS
In questo esempio, in primo luogo, creeremo un div e aggiungeremo un'intestazione e un campo di input. Quindi, imposta il tipo di input come ' testo ” e impostarne il valore su “ Inserisci il tuo nome ”.
HTML
< div >< centro >
< h1 > Disabilita un campo di input < / h1 >
< ingresso genere = 'testo' valore = 'Inserisci il tuo nome' >
< / centro >
< / div >
Dopodiché, passa al CSS e imposta lo stile del div impostando il suo colore di sfondo come ' RGB(184, 146, 99) ' e altezza come ' 150px ”.
CSS
div {sfondo- colore : RGB ( 184 , 146 , 99 ) ;
altezza : 150px;
}
Di seguito è riportato l'output del codice sopra descritto. Qui, possiamo vedere che il nostro campo di input è attualmente attivo e sta accettando l'input dall'utente:
Ora, passiamo alla parte successiva in cui utilizziamo il valore di ' eventi-puntatore ” proprietà come “ nessuno ”.
Esempio 2: disabilitazione di un campo di input utilizzando CSS
Useremo ora “ ingresso ” per accedere all'elemento aggiunto nel file HTML e impostare il valore di pointer-events come “ nessuno ”:
ingresso {eventi-puntatore : nessuno ;
}
Una volta implementata la suddetta proprietà “ eventi-puntatore ' insieme a ' 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 per disabilitare il campo di input usando CSS.
Conclusione
Per disabilitare un campo di input in un HTML, il ' eventi-puntatore ” viene utilizzata la proprietà del CSS. Per fare ciò, aggiungi un campo di input e imposta il valore di pointer-events come ' nessuno ” per disabilitare il campo di immissione. In questa guida spieghiamo il metodo per disabilitare un campo di input utilizzando CSS e ne forniamo un esempio.