div >
VIDEO
Piezīme: Mēs esam izmantojuši ' atlasīts paslēpts ', lai norādītu' - izvēlieties iespēju - ” kā noklusējuma opciju. Bet, kad lietotājs atlasīs vienu no tiem, tas tiks paslēpts.
Tālāk mēs pāriesim uz CSS un veidosim to.
2. darbība. Stilu nolaižamā izvēlne, izmantojot CSS
Mēs izmantosim ' div ”, lai piekļūtu izveidotajam konteineram un iestatītu div fona krāsu kā “ rgb(191, 207, 235) ”. Mēs arī iestatīsim div augstumu, teksta fonta lielumu un teksta krāsu kā ' 150 pikseļi ”, “ x-liels ', un ' rgb(2, 0, 0) ”, attiecīgi. Tālāk mēs iestatīsim div apmali kā “ 5 pikseļi ”, “ grēda ', un ' rgb(108, 75, 209) ”.
CSS
div { ( 191 , 207 , 235 ) ; ( divi , 0 , 0 ) ; ( 108 , 75 , 209 ) ; }
Tagad mēs izveidosim nolaižamās izvēlnes stilu un iestatīsim izvēlnes fona krāsu kā ' rgb(194, 222, 209) ' un izvēlnes apmali kā ' 3 pikseļi ”, “ ciets ', un ' rgb(84, 73, 116) ”. Pēc tam mēs iestatīsim izvēlnes platumu, augstumu un fonta lielumu kā “ 300 pikseļi ”, “ 30 pikseļi ' un ' liels ”, attiecīgi:
izvēlieties { ( 194 , 222 , 209 ) ; ( 84 , 73 , 116 ) ; }
Kā redzat no izvades, nolaižamā izvēlne ir izveidota un veiksmīgi veidota, izmantojot HTML un CSS:
Iepriekš sniegtajā izvadē ir redzams, ka ir izveidota nolaižamā izvēlne, kas ļauj izvēlēties jebkuru opciju atbilstoši savām vēlmēm. Mēs pārejam uz nākamo sadaļu, kur mēs mainīsim izvēlētās opcijas krāsu, izmantojot CSS.
Kā mainīt atlasītās opcijas krāsu, izmantojot CSS?
Lai mainītu izvēlnes izvēlētās opcijas krāsu, nospiediet ' :pārbaudīts ” tiek izmantots CSS atlasītājs. :checked ir pseidoklases elements, ko var saistīt tikai ar ievades tipa elementiem, piemēram, “ opciju ”, “ izvēles rūtiņa ', un ' radio pogas ”. To galvenokārt izmanto, lai mainītu šo elementu izvēlētās vērtības uzvedību.
Sintakse
:checked sintakse ir:
elementa_nosaukums:pārbaudīts { }
CSS deklarācijās var ierakstīt izvēlētās opcijas vērtības kodu, izvēles rūtiņu un radio.
Tagad pārejiet uz izvēlni un mainiet atlasītās opcijas krāsu, izmantojot :checked atlasītāju. Lai to izdarītu, mēs izmantosim ' opciju ”, lai piekļūtu izvēlnē izveidotajām opcijām un :pārbaudīts ” pseidoklasi uz atlasīto izvēlnes opciju. Tas ļauj mainīt izvēlētās opcijas uzvedību. Pēc tam mēs iestatīsim atlasītās opcijas krāsu kā ' rgb(246, 250, 0) ' un atlasītās opcijas fons kā ' rgb(5, 26, 1) ”:
opcija: atzīmēts { ( 246 , 250 , 0 ) ; ( 5 , 26 , 1 ) ; }
Kā redzat nākamajā izvadē, tiek mainīta fona un atlasītās opcijas krāsa:
Mēs esam izskaidrojuši veidu, kā mainīt izvēlētās opcijas krāsu, izmantojot CSS.
Secinājums
' :pārbaudīts ” pseidoklases selektors tiek izmantots, lai mainītu izvēlētās opcijas krāsu. :checked tiek izmantots kopā ar ' opciju ” nolaižamajā izvēlnē, un pēc tam varat iestatīt atlasītās opcijas krāsu. Šajā rokasgrāmatā ir izskaidrota nolaižamās izvēlnes izveides un stila veidošanas metode, kā arī parādīta procedūra, kā mainīt atlasītās opcijas krāsu, izmantojot CSS.