Šajā rokasgrāmatā mēs izskaidrosim dažādas metodes, kā mainīt ievades viettura krāsu, izmantojot CSS.
1. metode: mainiet ievades viettura krāsu, izmantojot atlasītāju “::placeholder”.
CSS ' ::vietturis ” atlasītājs tiek izmantots, lai atlasītu veidlapas elementus ar viettura tekstu. To var izmantot, lai mainītu viettura tekstu. Turklāt varat izmantot šo atlasītāju, lai mainītu ievades viettura krāsu.
Sintakse
Viettura :: sintakse ir šāda:
:: vietturis {
krāsa : vērtību
}
Vietā ' vērtību ”, varat iestatīt ievades viettura krāsu pēc mūsu izvēles.
Pāriesim uz praktisko piemēru, kur mainīsim ievades viettura krāsu.
Piemērs
Lai mainītu ievades viettura krāsu, pirmkārt, mēs izveidosim ievades elementu, izmantojot tagu un iestatīsim ievades veidu kā “ tekstu ”. Pēc tam iestatiet ievades viettura tekstu kā ' Ievadiet Tavs vārds ”.
HTML
< ķermeni >< ievade veids = 'teksts' vietturis = 'Ievadiet savu vārdu' >
< / ķermeni >
Dotā koda izvade ir:
Ievades viettura noklusējuma krāsa ir parādīta iepriekš parādītajā attēlā.
Tagad mēs pārejam uz CSS un izmantojam “ ::vietturis ”, lai piekļūtu ievades viettura tekstam un iestatītu tā krāsu kā “ rgb(17, 0, 255) ”.
CSS
:: vietturis {krāsa : rgb ( 17 , 0 , 255 ) ;
}
Kā redzat, pievienotā ievades viettura krāsa tiek mainīta uz zilu:
Ir arī cita metode, kā mainīt ievades viettura krāsu. Pārbaudīsim to.
2. metode: mainiet ievades viettura krāsu, izmantojot pseidoklases elementu “::-webkit-input-placeholder”
' :: – Webkit-input-placeholder ” pseidoklases elements galvenokārt attēlo formas elementa viettura tekstu. To var izmantot motīvu dizaineri un izstrādātāji, lai pielāgotu viettura teksta izskatu. Turklāt, izmantojot norādīto elementu, lietotājs var mainīt ievades viettura krāsu.
Sintakse
Sintakse ::-webkit-input-placeholder ir norādīta šādi:
:: -Webkit-input-placeholder {krāsa : vērtību
}
Vietā ' vērtību ”, varat iestatīt ievades viettura krāsu.
Pāriesim uz piemēru, lai saprastu iepriekš apspriesto pseidoklases elementu.
Piemērs
CSS failā izmantojiet ' ::-webkit-input-placeholder ' pseidoklases elementu un piešķiriet krāsas vērtību kā ' rgb(255, 13, 13) ”:
:::: -Webkit-input-placeholder {krāsa : rgb ( 255 , 13 , 13 ) ;
}
Izvade
Šeit varat redzēt, ka ir mainīta ievades viettura noklusējuma krāsa.
Secinājums
Ievades viettura krāsa tiek mainīta, izmantojot ' ::vietturis ' selektors un ' :: – Webkit-input-placeholder ” pseidoklases elements. Izmantojot to, varat mainīt ievades viettura noklusējuma krāsu. Šajā rakstā mēs esam izskaidrojuši procedūru, kas saistīta ar ievades viettura krāsas maiņu, izmantojot CSS rekvizītus.