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, 11:48

grazie Vic53, in pratica io volevo che si visionasse rosso nella modalità selezionata (come vedi nella pagina test) cioè senza aprire la tendina della select.
Cioè se in origine UNO è selezionato, ecco, devo visualizzarlo rosso, senza agire sulla tendina.
grazie

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

Forse vuoi fare tipo questo esempio?

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";
}
</script>
</head>
<body>
<p> 
<select id="test1"  onclick="Test()"  >
<option  value="0" style="background-color:white;" >ZERO</option>
<option  value="1" style="background-color:red;"><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>

Se pero' quando apri lil form vuoi che sia selezionato il colore relativo del campo selected che sarebbe dinamico...io utilizzo ASP e lo faccio inline...min javascripta se sai quale è il valore di option selezionato prima di visualizzare la select lo puoi cambiare onload...

vedi se puo esserti utile
ciao

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

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

Discussione: Impostare sfondo option di una select

Strumenti discussione

Ricerca discussione

Visualizza

Impostare sfondo option di una select

Permessi di invio