Come modellare il menu a discesa di selezione in CSS
Un discesa è un elenco di opzioni che appare solo quando l'utente fa clic o si libra su un'opzione e seleziona una o più opzioni dall'elenco indicato. Esistono molti modi per modellare un elenco a discesa usando diverse proprietà CSS, ad esempio colore, hover, posizione, margine e molti altri.
Siamo qui per spiegare come modellare un menu a discesa usando CSS. A tale scopo, in primo luogo, spiegheremo il processo di creazione di un menu a discesa cliccabile e, successivamente, modelleremo il menu a discesa di selezione in CSS.
Come creare un menu a discesa in CSS?
È possibile creare un menu a discesa in HTML utilizzando e tag. Per capire più chiaramente, passiamo alla sintassi del menu a discesa.
Sintassi
Ecco la sintassi del menu a discesa:
Spiegiamo gradualmente i tag HTML utilizzati nel blocco del codice sopra:
- etichetta: Viene utilizzato per specificare l'opzione abbreviata in forma di testo.
- Selezionare: Questo elemento consente all'utente di selezionare un elemento da un elenco.
- opzione: Viene utilizzato per fornire opzioni per il menu a discesa.
Qui presentiamo un esempio pratico per spiegare il punto.
Esempio
Nell'esempio dato, creeremo un menu a discesa al suo interno. Successivamente, etichetteremo il menu usando il ""Tag e assegna i valori dell'opzione con il""Tag. Abbiamo aggiunto gli elementi all'interno del tag per mostrare il menu al centro dello schermo:
Suggerimento Linux
Seleziona name = "Seleziona">
Dopo aver eseguito il codice fornito, verrà visualizzato il seguente discesa:
Come puoi vedere, il menu a discesa creato ha un aspetto semplice. Tuttavia, puoi modellarlo usando diverse proprietà CSS.
Come modellare il menu a discesa di selezione in CSS?
Nel CSS, modelleremo il menu a discesa di selezione come segue.
Passaggio 1: intestazione di stile
Modifichiamo il colore dell'intestazione usando "colore" proprietà:
H1
Colore: verde;
Qui, abbiamo assegnato un "verde"Colore per l'intestazione.
Passaggio 2: modifica il tipo di cursore
Cambia il tipo di cursore usando "cursore" proprietà. Di conseguenza, quando l'utente si libra nell'elenco dei menu, la forma del cursore cambierà in puntatore manuale:
#Selezionare
Cursore: puntatore;
Passaggio 3: menu a discesa in stile
Qui imposteremo gli attributi del menu a discesa assegnandolo un colore di sfondo "Luceeagreen", confine "1px nero solido", larghezza "300px", E altezza"30px":
Selezionare
Sfondo: Luceeagreen;
bordo: 1px nero solido;
larghezza: 300px;
Altezza: 30px;
Dopo aver completato tutti questi passaggi, eseguire il file HTML e guardare il risultato:
L'output mostra che l'aspetto del nostro menu a discesa è stata disegnata.
Conclusione
CSS offre più proprietà che possono essere utilizzate per modellare i menu a discesa. Ad esempio, le proprietà del bordo, del colore e dello sfondo vengono utilizzate per modellare il bordo, il colore e il colore dello sfondo del menu. Questo articolo ha spiegato il metodo di styling del menu a discesa e come assegnare diversi attributi ad esso.