Select Background Color

Salve a Tutti!

Allora io ho questo codice CSS:

Codice HTML:

---

select {
        background-color: rgb(0,0,0);
        background-color: rgba(255,255,255,0.1);
        color: #fff;
        border: 1px solid gray;
        padding: 1px;
}

---

Il problema sta nel bg-color espresso con il canale alfa. Firefox lo interpreta correttamente, dando l'effetto trasparenza anche al menu a tendina, Opera, IE e Chrome no, la tendina viene stampata a schermo completamente bianca, un effetto VERAMENTE orrendo. Come posso risolvere la cosa?

Grazie a tutti delle risposte :)

Da quello che so io, se non sbaglio, i colori rgba sono stati introdotti nella nuova versione dei css ( CSS3 ), quindi credo che oltre al nome del browser che le interpreta dovresti vedere anche la sua versione, da quello che vedo i browser da te elencati supporta benissimo i colori rgba:

http://www.css3maker.com/css-3-rgba.html

Lo provato personalmente e funziona, purtroppo non posso dire la stessa cosa per internet explore, avendo IE 8 e no il 9.

Poi, se in alternativa, vuoi far supportare la trasparenza da tutti i browser, a differenza della loro versione, oltre al suo colore rgb puoi utilizzare la proprietà opacity, in modo cross-browser ( supportata da tutti i browser ):

http://css-tricks.com/snippets/css/c...owser-opacity/

Il problema di opacity è che rende trasparente tutto, e non solo il BG. Comunque, su cosa l'hai provato? Io ho il problema che il box contenete la voce predefinita e la freccina si vede giusto, ma appena clicco la freccina per aprire fisicamente il resto delle voci, lo sfondo della tendina diventa bianco.

Ciao. Hai una pagina dove farci vedere un esempio?

http://morgensterngdr.altervista.org/gdr/

Eseguendo il log-in usando test come user name e test come password ne trovate a bizzeffe XD

P.S. = Non guardate la home, non ci ho ancora lavorato XD

Su chrome dovresti modificare questo:

select:not([size]):not([multiple]) option, select[size] option, select[size="1"] option {
background-color: rgb(247, 247, 247);
}

EDIT: Ho appena realizzato che non puoi farlo. Quindi sisattiva gli stili di default di chrome (il bianco del dropdown, per l'appunto)

select
{
-webkit-appearance: none;
}

EDIT2: Ho appena realizzato che non funziona su chrome. L'unica è usare uno script jQuery, così sei sicuro che venga uguale in tutti i browser.
http://uniformjs.com/

Sinceramente non ho tutta questa voglia di usare JQUERY, fosse per me non avrei neanche usato un JS. Non c'è altra soluzione?

EDIT: Risolto in un modo stupidissimo. Nel CSS ho aggiunto:

Codice HTML:

---

option{
        background-color: #000000;
}

---

Ora devo scegliere che colore farlo esattamente.

Citazione:

---

Originalmente inviato da morgensterngdr

Sinceramente non ho tutta questa voglia di usare JQUERY, fosse per me non avrei neanche usato un JS. Non c'è altra soluzione?

EDIT: Risolto in un modo stupidissimo. Nel CSS ho aggiunto:

Codice HTML:

---

option{
        background-color: #000000;
}

---

Ora devo scegliere che colore farlo esattamente.

---

avevo provato nel... Firebug? Di chrome e non funzionava. Probabilmente doveva essere nel css

Citazione:

---

Originalmente inviato da edo98

avevo provato nel... Firebug? Di chrome e non funzionava. Probabilmente doveva essere nel css

---

Sinceramente mi viene da dire: "Non mi stupisce che qualcosa su chrome non funzioni" XD Ma va beh. Comunque sì, se lo metti inline anche la W3C non è molto d'accordo, ma nel CSS passa pure le validazioni e funziona su tutti. Il problema è che il parametro rgba viene interpretato solo correttamente (e manco troppo) da FireFox se messo come sfondo ad un parametro option.