Impostare sfondo option di una select

**djjunior** · 23-05-2016, 11:59

Salve,
è possibile ottenere questo risultato? In pratica serve impostare solo all'option selezionata (quindi visualizzata) con un colore di sfondo.

codice:

<select>
<option value="0" >ZERO</option>
<option (SFONDO) value="1" selected>UNO</option>
</select>

Ho provato in css ma senza risultati.
Potete aiurarmi?
Grazie

**br1** · 23-05-2016, 15:24

Facci vedere la tua prova...

<option style="background-color:red;">pippo</option>

**djjunior** · 23-05-2016, 17:51

http://www.sertransfer.com/test.html

Come si vede viene visualizzato l'option selezionata (UNO) ma senza sfondo rosso, mentre se apro la select e mi sposto sull'altra opzione vedo lo sfondo colorato.
Però vorrei vedere lo sfondo rosso nella posizione selezionata cioè come è ora, senza aprire la select.
Grazie

**br1** · 23-05-2016, 22:13

Quando non stai scegliendo vedi l'oggetto select e non gli oggetti option, se provi a cambiare il colore all'oggetto select, essendo esso il contenitore delle option, quando riaprirai le option le vedrai tutte del colore del select
prova:

codice:

<select onchange="this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor;">
<option value="0" >ZERO</option>
<option style="background-color:red;" value="1" selected>UNO</option>
</select>

... quindi ... potrebbe non essere possibile in modo cosi' semplice, ritengo tu debba usare un controllo che simuli il comportamento di una select per ottenere il risultato che cerchi.

**vic53** · 23-05-2016, 22:53

mettendo il tag span...la option apparirà' rossa se selezionata
prova...

codice:

<option value="0" >ZERO</option>
<option style="background-color:red;" value="1" selected><span >UNO</span></option>
</select>

**djjunior** · 24-05-2016, 09:21

Chiedo a br1 se può consigliarmi una alternativa, in pratica il valore della select deve subito attrarre l'attenzione se selezionata una determinata option...
Ho provato l'inserimento del tag span consigliato da vic53 ma non visualizzo cambiamenti (vedere link alla select indicata su)

**vic53** · 24-05-2016, 11:17

Originariamente inviata da djjunior

Chiedo a br1 se può consigliarmi una alternativa, in pratica il valore della select deve subito attrarre l'attenzione se selezionata una determinata option...
Ho provato l'inserimento del tag span consigliato da vic53 ma non visualizzo cambiamenti (vedere link alla select indicata su)

l'opzione UNO se non selezionata è rossa quando la tendina è aperta...quando invece il cursore è sopra
prevale il colore della selezione...
Ma se hai per esempio 10 elementi e vuoi far vedere uno rosso quello quando apri la tendina lo vedi.... poi quuando ci vai col cursore sopra la select imposta il suo color default per far vedere che è selezionata...
Quando poi lo selezioni e confermi poi puoi far diventare la select rossa...
oppure cerchi una altra cosa?

**djjunior** · 24-05-2016, 12:03

però se è lo trovo già selezionato lo vedo con lo sfondo classico (vedi pagina test)

**vic53** · 24-05-2016, 12:18

ok ti ho modificato l'esempio di prima prova questo

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function Test() {
 test1.style.backgroundColor=test1.options[test1.selectedIndex].style.backgroundColor;
 test1.options[0].style.backgroundColor="white";
 test1.options[1].style.backgroundColor="red";
 test1.options[2].style.backgroundColor="green";
 test1.options[3].style.backgroundColor="gray";
}
function PreimpostaColore() {
 var arr = new Array("white","red","green","gray");
// sono i valori delle option impostate 
 var valore=document.getElementById("test1").value;
 test1.style.backgroundColor=arr[valore];

}
</script>
</head>
<body onload="PreimpostaColore()">
<p> 
<select id="test1"  onclick="Test()"  >
<option  value="0" style="background-color:white;" >ZERO</option>
<option  value="1" style="background-color:red;" selected><span >UNO</span></option>
<option  value="2" style="background-color:green;" value="1"   ><span >DUE</span></option>
<option  value="3"  style="background-color:gray;"><span >TRE</span></option>
</select>
</p>
</body>
</html>

**vic53** · 24-05-2016, 15:08

Originariamente inviata da djjunior

però se è lo trovo già selezionato lo vedo con lo sfondo classico (vedi pagina test)

ciao
vedi questa modifica che ti ho fatto

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function Test() {
 test1.style.backgroundColor=test1.options[test1.selectedIndex].style.backgroundColor;
 test1.options[0].style.backgroundColor="white";
 test1.options[1].style.backgroundColor="red";
 test1.options[2].style.backgroundColor="green";
 test1.options[3].style.backgroundColor="gray";
}
function PreimpostaColore() {
 var arr = new Array("white","red","green","gray");
// sono i valori delle option impostate 
 var valore=document.getElementById("test1").value;
 test1.style.backgroundColor=arr[valore];

}
</script>
</head>
<body onload="PreimpostaColore()">
<p> 
<select id="test1"  onclick="Test()"  >
<option  value="0" style="background-color:white;" >ZERO</option>
<option  value="1" style="background-color:red;" selected><span >UNO</span></option>
<option  value="2" style="background-color:green;" value="1"   ><span >DUE</span></option>
<option  value="3"  style="background-color:gray;"><span >TRE</span></option>
</select>
</p>
</body>
</html>

magari ci ricavi il codice che ti serve...
ciao

Discussione: Impostare sfondo option di una select

Strumenti discussione

Ricerca discussione

Visualizza

Hybrid View

Impostare sfondo option di una select

Permessi di invio