[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.362
338
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
147
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.
select.jpg

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

Max 1

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
29 Feb 2012
4.362
338
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.
 
Discussioni simili
Autore Titolo Forum Risposte Data
Shyson Meglio Javascript o HTML? Javascript 4
webmachine [PHP] [JAVASCRIPT] Form strano in HTML PHP PHP 1
M Programmazione web HTML, CSS e JavaScript Offerte e Richieste di Lavoro e/o Collaborazione 6
Monital [Javascript] inserire dati estratti dal db in html fisso Javascript 1
Domenico_Falco1 [Javascript] [HTML] Campi form con sfondo imposto dal browser Javascript 5
Giacomo Boccherini [Javascript] [HTML] Hover Javascript 1
T [Javascript] Richiamare un file.js (iframe) in html Javascript 1
Emix [Javascript] Somma con array input HTML Javascript 1
S [Javascript] [HTML] App incorpora pagina web - Come impedirlo? Javascript 0
K [Javascript] [HTML] Invertire colori alternati in tabella Javascript 3
D [Javascript] [HTML] Inserire slash dopo 3 numeri Javascript 5
M [Javascript] [HTML] link interno Javascript 1
N [Javascript] [HTML] Scelta di una select e compilazione automatica delle restanti Javascript 0
V [Javascript] [HTML] Attivazione nuovi campi di input Javascript 2
D [Javascript] [HTML] Evidenziare testo di una text Javascript 1
D [Javascript] [HTML] Insertimento audio Javascript 8
S [Javascript] [HTML] creare stringhe di riferimento da riutilizzare Javascript 5
C [Javascript] [HTML] È possibile "puntare" un iframe? Javascript 14
M [Javascript] [HTML] come aumentare il valore di una progress bar quando si preme un bottone Javascript 1
W [Javascript] Eseguire script residente nel sistema da html remota Javascript 0
Marcox360 Tris con HTML e JavaScript Javascript 0
C [Javascript] [HTML] Problemi: Overlay, Banner, Menu Javascript 4
A [Javascript] NodeJs e HTML Javascript 2
D [Javascript] [HTML] Countdown su Mobirise di 24 ore relative per ogni utente. Javascript 4
W [Javascript] [HTML] menù responsive fisso Javascript 2
C [Javascript] cambio dinamico riferimento elemento html Javascript 2
V Passaggio codice html a javascript Javascript 8
A [Javascript] [HTML] RISOLTO...Allungare un box all'apertura della pagina No Mouse over Javascript 9
A [Javascript] Passare variabile tra pagine html diverse Javascript 13
Monz94 [Javascript] [HTML] Creare Checkbox o Radio con Immagini Javascript 0
S [Javascript] [HTML] problema nella stampa degli elementi della pagina Javascript 3
zammaeng [Javascript] [HTML] globo 3D Javascript 5
trattorino [Javascript] [HTML] risultato imput dentro text area Javascript 2
trattorino [Javascript] [PHP] due righe su sorgente html Javascript 3
C [Javascript] HTML form attributes: combining charset with enctype HTML e CSS 4
R [Javascript] [HTML] [PHP] Javascript 2
U [Javascript] [HTML] doppio click Javascript 18
S [Javascript] Slider html: Mostrare immagini su 4 colonne Javascript 20
A [Javascript] [HTML] Gestire una pagina esterna con 2 iframe Javascript 4
S [Javascript] Sostituire elemento HTML preso randomicamente dentro array Javascript 1
D [Javascript] Come creare un equalizzatore HTML collegato a files audio Javascript 1
romeocharly errore del codice html con javascript durante ottimizzazione websitex5 Javascript 7
R Javascript e html - estrazione EXIF da jpg con link per geolocalizzazione google maps Javascript 0
A [CERCO] cerco esperto di codici HTML e JavaScript per lavorare ad 1 applicazione Offerte e Richieste di Lavoro e/o Collaborazione 1
U Far partire una funzione JavaScript premendo bottone in html Javascript 7
Devil-94 Javascript: script che permetta di inserire immagini in un certo elemento html. Javascript 2
I Pubblicare un sito realizzato con html, css e javascript Webdesign e Grafica 13
A eseguire codice html da funzione javascript Javascript 2
P text/ javascript in html Javascript 3
M Comandi FTP in pagina html - Javascript Javascript 1

Discussioni simili