Come modificare il colore dell'opzione selezionato usando CSS
Le opzioni vengono fornite all'utente quando esistono più valori di un singolo elemento, da dove gli utenti possono selezionare un'opzione in base alle loro preferenze. Esiste in forme diverse, come una casella di controllo, menu a discesa e pulsante di opzione. Più specificamente, il menu a discesa fornisce elenchi predefiniti di opzioni che consentono all'utente di selezionarne una.
Questo manuale spiegherà la procedura per modificare il colore dell'opzione selezionata. Per questo, in primo luogo, creeremo un menu a discesa e lo modelleremo usando CSS e quindi cambieremo il colore dell'opzione selezionato.
Iniziamo!
Come creare un menu a discesa utilizzando HTML e CSS?
In HTML, è possibile creare un menu a discesa utilizzando "","" E ""Tag. Per capire più chiaramente, passiamo alla sintassi del menu a discesa.
Sintassi
Ecco la sintassi del menu a discesa:
Spieghiamo i tag HTML utilizzati nella sintassi sopra:
- : Viene utilizzato per specificare l'opzione abbreviata in forma di testo.
- : Questo elemento consente all'utente di selezionare un elemento da un elenco.
- : Viene utilizzato per fornire opzioni per il menu a discesa.
Qui presentiamo un esempio pratico per spiegare la sintassi sopra.
Passaggio 1: creare un menu a discesa
Innanzitutto, creeremo A e aggiungeremo un'intestazione usando il
etichetta. Per aggiungere un menu a discesa al suo interno, useremo un tag dell'etichetta e aggiungiamo "Scegli un paese"Come l'etichetta. Successivamente, useremo il tag per rendere le opzioni deliziose per l'utente e assegneremo i valori delle opzioni con ""Tag.
Html
Linux
Nota: Abbiamo usato "nascosto selezionato" specificare "-scegliere un'opzione-"Come opzione predefinita. Ma quando l'utente ne seleziona uno, sarà nascosto.
In seguito, andremo al CSS e lo stile.
Passaggio 2: menu a discesa in stile usando CSS
Noi useremo "div"Per accedere al contenitore creato e impostare il colore di sfondo del Div come"RGB (191, 207, 235)". Imposteremo anche l'altezza del div, la dimensione del carattere del testo e il colore del testo come “150px","X-Large", E "RGB (2, 0, 0)"Rispettivamente. Successivamente, imposteremo il confine del div come "5px","cresta", E "RGB (108, 75, 209)".
CSS
div
Background-color: RGB (191, 207, 235);
Altezza: 150px;
Font-Size: X-Large;
Colore: RGB (2, 0, 0);
Bordo: 5px Ridge RGB (108, 75, 209);
Ora, modelleremo il menu a discesa e imposteremo il colore di sfondo del menu come "RGB (194, 222, 209)"E il bordo del menu come"3px","solido", E "RGB (84, 73, 116)". Successivamente, imposteremo la larghezza, l'altezza e la dimensione del carattere del menu come "300px","30px" E "grande"Rispettivamente:
Selezionare
Background: RGB (194, 222, 209);
Bordo: 3px Solid RGB (84, 73, 116);
larghezza: 300px;
Altezza: 30px;
Font-size: grande;
Come puoi vedere dall'output, il menu a discesa viene creato e disegnato correttamente utilizzando HTML e CSS:
Nell'output sopra fornito, si può vedere che il menu a discesa viene creato e consente di selezionare qualsiasi opzione in base alle tue preferenze. Passiamo alla sezione successiva, dove cambieremo il colore dell'opzione selezionato usando il CSS.
Come cambiare il colore dell'opzione selezionata usando CSS?
Per modificare il colore dell'opzione selezionato del menu, il “:controllato"Viene utilizzato il selettore di CSS. : controllato è un elemento di classe pseudo che può essere collegato solo con elementi del tipo di input, come "opzione","Casella di controllo", E "Radio pulsanti". Viene utilizzato principalmente per cambiare il comportamento del valore selezionato di questi elementi.
Sintassi
La sintassi di: controllata è:
Element_name: controllato
Dichiarazioni CSS;
Nelle dichiarazioni CSS è possibile scrivere il codice per il valore selezionato dell'opzione, della casella di controllo e della radio.
Ora, spostati nel menu e modifica il colore dell'opzione selezionata utilizzando: selettore selezionato. Per farlo, useremo "opzione"Per accedere alle opzioni create nel menu e":controllato"Classe pseudo all'opzione di menu selezionata. Consente di modificare il comportamento dell'opzione selezionata. Successivamente, imposteremo il colore dell'opzione selezionata come "RGB (246, 250, 0)"E lo sfondo dell'opzione selezionata come"RGB (5, 26, 1)":
Opzione: controllata
Colore: RGB (246, 250, 0);
Background-color: RGB (5, 26, 1);
Come puoi vedere nella seguente uscita, lo sfondo e il colore dell'opzione selezionato vengono modificati:
Abbiamo spiegato il metodo per modificare il colore dell'opzione selezionato usando il CSS.
Conclusione
IL ":controllato"Il selettore di classe pseudo viene utilizzato per modificare il colore dell'opzione selezionato. Il: controllato viene utilizzato insieme al "opzione"Del menu a discesa, e successivamente, è possibile impostare il colore dell'opzione selezionata. Questo manuale ha spiegato il metodo di creazione e styling del menu a discesa e quindi ha dimostrato la procedura per modificare il colore dell'opzione selezionato usando CSS.