Kuinka poistaa syöttökenttä käytöstä CSS:n avulla?

Kuinka Poistaa Syottokentta Kaytosta Css N Avulla



Syötekenttää käytetään lomakkeiden tekemiseen ja syötteiden vastaanottamiseen käyttäjältä. Käyttäjät voivat täyttää syöttökentän syöttötyypin mukaan. Mutta joskus sinun on poistettava syöttökenttä käytöstä täyttääksesi kaikki edellytykset, kuten valintaruudun valitseminen. Tässä tilanteessa sinun on poistettava syöttökenttä käytöstä.

Tässä oppaassa saamme käsityksen siitä, kuinka syöttökenttä poistetaan käytöstä CSS:n avulla. Joten, aloitetaan!

Kuinka poistaa syöttökenttä käytöstä CSS:n avulla?

CSS:ssä tapahtumat poistetaan käytöstä käyttämällä ' osoitin-tapahtumat ” omaisuutta. Joten ensin oppia osoitin-tapahtumat-ominaisuudesta.







Mikä on 'osoitintapahtumat' CSS-ominaisuus?

' osoitin-tapahtumat ” hallitsee, miten HTML-elementit reagoivat tai käyttäytyvät kosketustapahtumaan, kuten napsautus- tai napautustapahtumiin, aktiivisiin tai hover-tiloihin ja onko kohdistin näkyvissä vai ei.



Syntaksi
Osoitintapahtumien syntaksi annetaan seuraavasti:



osoitin-tapahtumat : auto | ei mitään ;

Yllä mainittu ominaisuus ottaa kaksi arvoa, kuten ' auto ' ja ' ei mitään ':





  • auto: Sitä käytetään oletustapahtumien suorittamiseen.
  • ei mitään: Sitä käytetään tapahtumien poistamiseen.

Suuntaa annettuun esimerkkiin.

Esimerkki 1: Syöttökentän lisääminen CSS:n avulla

Tässä esimerkissä luomme ensin div ja lisäämme siihen otsikon ja syöttökentän. Aseta sitten syöttötyypiksi ' teksti ja aseta sen arvoksi Kirjoita nimesi ”.



HTML

< div >
< keskusta >
< h1 > Poista syöttökenttä käytöstä < / h1 >
< syöttö tyyppi = 'teksti' arvo = 'Kirjoita nimesi' >
< / keskusta >
< / div >

Siirry sen jälkeen CSS:ään ja muotoile div asettamalla sen taustaväriksi ' rgb(184, 146, 99) ' ja korkeus ' 150 pikseliä ”.

CSS

div {
tausta- väri- : rgb ( 184 , 146 , 99 ) ;
korkeus : 150 pikseliä;
}

Yllä kuvatun koodin tulos on annettu alla. Tässä näemme, että syöttökenttämme on tällä hetkellä aktiivinen ja hyväksyy syötteen käyttäjältä:

Siirry nyt seuraavaan osaan, jossa käytämme ' osoitin-tapahtumat ' omaisuutta nimellä ' ei mitään ”.

Esimerkki 2: Syöttökentän poistaminen käytöstä CSS:n avulla

Käytämme nyt ' syöttö ' päästäksesi HTML-tiedostoon lisättyyn -elementtiin ja asettamaan osoitintapahtumien arvoksi ' ei mitään ':

syöttö {
osoitin-tapahtumat : ei mitään ;
}

Kun olet ottanut yllä mainitun ominaisuuden käyttöön ' osoitin-tapahtumat ' kanssa ' ei mitään ”-arvoa, syöttökentän tekstiä ei voi muokata, mikä osoittaa, että syöttökenttämme on poistettu käytöstä:

Se siitä! Olemme selittäneet menetelmän, jolla syöttökenttä poistetaan käytöstä CSS:n avulla.

Johtopäätös

Jos haluat poistaa syöttökentän käytöstä HTML-koodissa, ' osoitin-tapahtumat ” CSS:n omaisuutta käytetään. Voit tehdä tämän lisäämällä syöttökentän ja asettamalla osoitintapahtumien arvoksi ' ei mitään ' poistaaksesi syöttökentän käytöstä. Tässä oppaassa selitämme menetelmän syöttökentän poistamiseksi käytöstä CSS:n avulla ja annamme siitä esimerkin.