Hvordan deaktivere et inndatafelt ved hjelp av CSS?

Inndatafeltet brukes til å lage skjemaer og ta innspill fra brukeren. Brukere kan fylle inn inndatafeltet i henhold til inndatatypen. Men noen ganger må du deaktivere inndatafeltet for å oppfylle enhver forutsetning, for eksempel å velge en avmerkingsboks. I den situasjonen må du deaktivere inndatafeltet.

I denne veiledningen vil vi få en forståelse av hvordan du deaktiverer inndatafeltet ved hjelp av CSS. Så, la oss begynne!

Hvordan deaktivere et inndatafelt ved hjelp av CSS?

I CSS deaktiveres hendelser ved å bruke ' peker-hendelser ” eiendom. Så, først, lær om pointer-events-egenskapen.

Hva er 'pekerhendelser' CSS-eiendom?

« peker-hendelser ” kontrollerer hvordan HTML-elementene reagerer eller oppfører seg på berøringshendelsen, for eksempel klikk- eller trykkhendelser, aktive eller svevetilstander, og om markøren er synlig eller ikke.

Syntaks
Syntaksen til pekerhendelser er gitt som følger:

peker-hendelser : auto | ingen ;

Egenskapen ovenfor har to verdier, for eksempel ' auto ' og ' ingen ':

auto: Den brukes til å utføre standardhendelser.
ingen: Den brukes til å deaktivere hendelser.

Gå mot det gitte eksemplet.

Eksempel 1: Legge til et inndatafelt ved hjelp av CSS

I dette eksemplet vil vi først lage en div og legge til en overskrift og inndatafelt til den. Sett deretter inndatatypen som ' tekst ' og angi verdien som ' Skriv inn navnet ditt '.

HTML

< div >
< senter >
< h1 > Deaktiver et inndatafelt < / h1 >
< input type = 'tekst' verdi = 'Skriv inn navnet ditt' >
< / senter >
< / div >

Etter det, flytt til CSS og stil div ved å sette bakgrunnsfargen som ' rgb(184, 146, 99) ' og høyde som ' 150 piksler '.

CSS

div {
bakgrunn- farge : rgb ( 184 , 146 , 99 ) ;
høyde : 150px;
}

Utdataene fra den ovenfor beskrevne koden er gitt nedenfor. Her kan vi se at inndatafeltet vårt for øyeblikket er aktivt og godtar innspill fra brukeren:

Gå nå til neste del der vi bruker verdien av ' peker-hendelser ' eiendom som ' ingen '.

Eksempel 2: Deaktivering av et inndatafelt ved hjelp av CSS

Vi vil nå bruke ' input ' for å få tilgang til -elementet lagt til i HTML-filen og angi verdien for pekerhendelser som ' ingen ':

input {
peker-hendelser : ingen ;
}

Når du implementerer egenskapen ovenfor ' peker-hendelser ' med ' ingen ”-verdi, vil teksten i inndatafeltet ikke kunne redigeres, noe som indikerer at inndatafeltet vårt er deaktivert:

Det er det! Vi har forklart metoden for å deaktivere inndatafeltet ved hjelp av CSS.

Konklusjon

For å deaktivere et inndatafelt i en HTML, ' peker-hendelser ” egenskapen til CSS brukes. For å gjøre det, legg til et inndatafelt og sett verdien for pekerhendelser som ' ingen ' for å deaktivere inndatafeltet. I denne veiledningen forklarer vi metoden for å deaktivere et inndatafelt ved hjelp av CSS og gir et eksempel på det.

Hvordan deaktivere et inndatafelt ved hjelp av CSS?