[Javascript] [HTML] personalizzare stili input select

[asevenx]

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.

                    <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]

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]

ciao
se vuoi cambiare solo lo sfondo di una option prova questo css

option:hover{
    background-color:#FFFF99;
}
option:checked {
    background-color:#FF0000;
}

o della select tutta

select:hover{
    background-color:#FFFF99;
}
select:checked {
    background-color:#FF0000;
}

la prima dovrebbe funzionare la seconda non so

 

[asevenx]

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]

Penso ci voglia javascript il solo CSS un credo basti.
Se vuoi ti sposto in javascript. Dimmi tu?

 

[asevenx]

ok grazie, sinceramente volevo evitare .js ma se non c'è altro modo va bene.