È più facile fare la scelta giusta se sai tutte le vostre opzioni. HyperText Markup Language o HTML, fa la sua parte per aiutarvi fornendo il controllo listbox o il tag input di modulo elenco a discesa. A differenza di < p > o < div > Tag, il controllo listbox non dispone di molte opzioni di stile. Inoltre, diversi browser può rendere alcune opzioni di stile e non altri. Per esempio, alcuni browser solo vi permetterà di cambiare colore del testo e sfondi, mentre altri browser ti consente di cambiare font, ampiezza di carattere, dimensioni, peso e testo custodia si trasforma.

Istruzioni

1

Lanciare l'editor di testo blocco note facendo clic sul pulsante "Start", cliccando su "Tutti i programmi", "Accessori" e quindi fare clic su blocco note.

2

Immettere il seguente codice nell'editor di testo digitandolo in o selezionando il codice con il mouse, premendo "CTRL + C" e incollarlo nell'editor con un comando "Control + V".

< html >
< head >
< script type = "text/javascript" >
funzione stylelistbox()
{
document.getElementById('item1').style.fontSize = "36px";
document.getElementById('item1').style.color = "white";
document.getElementById('item1').style.backgroundColor = "red";
document.getElementById('item1').style.fontWeight = "grassetto";
document.getElementById('item1').style.direction = "rtl";
document.getElementById("item1").style.letterSpacing = "10px";
document.getElementById("item1").style.fontVariant = "small-caps";
document.getElementById("item1").style.fontFamily = "impatto, carboncino, sans
}
< / script >
<!---> stile originale
< style type = "text/css" ><!...

Item1 {

colore: rosso;
}
--> < / stile >
< / head >
< corpo >
< selezionare dimensione = "1" >

<option id="item1" >Cats</option>
<option>Dogs</option>

Furetti < opzione > < / option >
< / selezionare >
< id pulsante = "primo" type = "button" onClick="javascript:stylelistbox()" > stile listbox < / button >
< / body >
< / html >

3

Fare clic sul menu "File". Selezionare l'opzione "Salva". Salvare sotto il nome di file "test."

4

Avviare un browser Web facendo clic sul pulsante "Start", cliccando su "Tutti i programmi" e cliccando su di esso. Fare clic sulla voce di menu "File" e selezionare "Apri File".

5

Individuare il file "test. html" appena creato, selezionarlo con il mouse, quindi fare clic su "Apri".

6

Fare clic sulla freccia in giù sull'oggetto listbox con l'etichetta "Cats". La parola "Gatti" dovrebbe essere rossa. Fare clic sul pulsante "Stile listbox." Fare clic sulla freccia in giù sull'oggetto listbox con l'etichetta "Gatti" nuovamente. Dipendendo dal tuo browser, potrai vedere i "gatti" con lettere bianche, piccola capitale, sfondo rosso, widespacing e una maggiore dimensione del carattere

Consigli & Avvertenze

• Design e stile elementi del modulo per renderlo accessibile a quanti più utenti diversi con diversi browser Web, sistemi operativi e dispositivi. Se gli elementi del form sono troppo piccoli, o non distinti, un utente con uno "Smart Phone" o un piccolo tablet PC potrebbe non essere in grado di scegliere una selezione con un dito. Etichettare gli elementi del form. Utilizzare "< optgroup >" dove appropriato. Ci sono simulatori online per Android, iPhone, Opera Mobile e Mini, Blackberry e Nokia browser mobile.
• È possibile lo stile in una sola volta tutti gli elementi a discesa listbox dando loro lo stesso nome di classe e stile di classe. Un altro modo è quello di raggruppare le voci utilizzando il tag < optgroup >. Applicare gli stili in linea per il optgroup o assegnarle un id univoco con le informazioni di stile nella sezione di testa o un file CSS separato. Il codice riportato di seguito dispone di due gruppi: gli animali domestici e hobby. Animali domestici devono avere un carattere più grande, di colore verde che il gruppo di collezionisti:
• < selezionare dimensione = "1" >
• < optgroup etichetta = "Animali domestici" style = "font-size: 20px; colore: verde;">
• < id opzione = "item1" > Gatti < / option >
• i cani < opzione > < / option >
• Furetti < opzione > < / option >
• < / optgroup >
• < optgroup etichetta = "Hobby" id = "group2" >
• < id opzione = "item2" > computer < / option >
• Sport < opzione > < / option >
• < opzione > SciFi < / option >
• < / optgroup >
• < / selezionare >