[Javascript] [HTML] personalizzare stili input select

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Salve a tutti, avrei una domandina su come personalizzare gli stili fi un form. Vorrei far cambiare lo sfondo dell'input di una select dopo che l'utente ha selezionato una opzione. Per essere più chiaro, quando l'utente apre il form, la casella del select ha uno sfondo, mentre quando l'utente seleziona un opzione vorrei avere un altro sfondo.

Ho provato ad applicare gli stili nel seguente modo, ma lo sfondo personalizzato lo ottengo nel menu a tendina, invece io vorrei averlo nell'input principale dopo essere selezionato.
HTML:
                    <select name = "profile" required class="classInput6">
                        <option value="0"></option>
                        <option value="1">Operatore Amministrativo</option>
                        <option value="2" class="red">Super Amministratore</option>
                        <option value="3">Istruttore</option>
                        <option value="4">Cliente</option>
                    </select>
grazie per l'aiuto
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.238
322
83
Ciao
Forse sono un po' ritardato di comprendomio, ma prima dici che vuoi uno sfondo personalizzato nella select
a casella del select ha uno sfondo, mentre quando l'utente seleziona un opzione vorrei avere un altro sfondo.
Poi dici
lo sfondo personalizzato lo ottengo nel menu a tendina
che lo ottieni nel menu a tendina che è sempre la select, quindi dovresti essere a posto, ma poi dici
invece io vorrei averlo nell'input principale
che lo vorresti nel input principale!

Pertanto io non ho capito cosa vuoi fare, se mi aiuti a capire forse posso darti una mano!

Scusa se sono un po' rintronato
 

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
ciao
se vuoi cambiare solo lo sfondo di una option prova questo css
Codice:
option:hover{
    background-color:#FFFF99;
}
option:checked {
    background-color:#FF0000;
}
o della select tutta
Codice:
select:hover{
    background-color:#FFFF99;
}
select:checked {
    background-color:#FF0000;
}
la prima dovrebbe funzionare la seconda non so
 

asevenx

Utente Attivo
7 Nov 2009
312
0
16
Ciao grazie entrambi per l'aiuto. Borgo, ho provato come suggerito ma non ottengo il risultato che vorrei.

Provo a spiegarmi meglio facendo un semplice esempio (allego anche un immagine per maggiore chiarezza). Mettiamo che ho una select con alcune opzioni. Prima che l'utente selezioni un opzione, il campo select ha uno sfondo rosso. Quando l'utente apre il menu a tendina le varie opzioni avranno uno sfondo blu, e infine quando l'utente seleziona un opzione, il campo select deve apparire con lo sfondo blu, ovvero dell'opzione selezionata.
In poche parole, lo sfondo della select cambia con la scelta dell'opzione da parte dell'utente.

Spero sia più chiaro, grazie ancora a entrambi :)
 

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.238
322
83
Penso ci voglia javascript il solo CSS un credo basti.
Se vuoi ti sposto in javascript. Dimmi tu?
 

asevenx

Utente Attivo
7 Nov 2009
312
0
16
ok grazie, sinceramente volevo evitare .js ma se non c'è altro modo va bene.