Rimuovi contorno dalla casella di selezione in FF

È possibile rimuovere la linea tratteggiata che circonda un elemento selezionato in un elemento selezionato?

Ho provato ad aggiungere la outlineproprietà in CSS ma non ha funzionato, almeno non in FF.

<style>
   select { outline:none; }
</style>

Aggiorna
Prima di procedere e rimuovere la struttura, leggi questo.
http://www.outlinenone.com/

Ho trovato una soluzione, ma è la madre di tutti gli hack, spero servirà come punto di partenza per altre soluzioni più robuste. Lo svantaggio (troppo grande secondo me) è che qualsiasi browser che non supporta text-shadowma supporta rgba(IE 9) non visualizzerà il testo a meno che non si utilizzi una libreria come Modernizr (non testata, solo una teoria).

Firefox utilizza il colore del testo per determinare il colore del bordo tratteggiato. Quindi dì se lo fai ...

select {
  color: rgba(0,0,0,0);
}

Firefox renderà trasparente il bordo tratteggiato. Ma ovviamente anche il tuo testo sarà trasparente! Quindi dobbiamo in qualche modo visualizzare il testo. text-shadowviene in soccorso:

select {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Inseriamo un'ombra del testo senza offset e senza sfocatura, in modo che sostituisca il testo. Ovviamente il browser più vecchio non ne capisce nulla, quindi dobbiamo fornire un fallback per il colore:

select {
  color: #000;
  color: rgba(0,0,0,0);
  text-shadow: 0 0 0 #000;
}

Questo è quando IE9 entra in gioco: supporta rgbama non l'ombra del testo, quindi otterrai una casella di selezione apparentemente vuota. Ottieni la tua versione di Modernizr con text-shadowrilevamento e fai ...

.no-textshadow select {
  color: #000;
}

Godere.

Bene, la risposta di Duopixel è semplicemente perfetta. Se andiamo oltre, possiamo renderlo a prova di proiettile.

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

Ecco fatto, valido solo per Firefox e il brutto contorno tratteggiato attorno all'opzione selezionata è sparito.

Ecco una collaborazione di soluzioni per risolvere i problemi di stile con le caselle di selezione di Firefox. Usa questo selettore CSS come parte del tuo solito ripristino CSS.

La classe rimuove il contorno come da domanda ma rimuove anche qualsiasi immagine di sfondo (poiché di solito uso una freccia a discesa personalizzata e la freccia a discesa del sistema Firefox non può attualmente essere rimossa). Se si utilizza l'immagine di sfondo per qualcosa di diverso dall'immagine a discesa, è sufficiente rimuovere la lineabackground-image: none !important;

@-moz-document url-prefix() {
    select, select:-moz-focusring, select::-moz-focus-inner {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
       background-image: none !important;
       border:0;
    }
}

Questo avrà come target tutte le versioni di Firefox

@-moz-document url-prefix() { 
    select {
       color: transparent !important;
       text-shadow: 0 0 0 #000 !important;
    }
}

Potresti voler rimuovere! Important, se prevedi di far apparire lo schema su altre pagine del tuo sito che utilizzano lo stesso foglio di stile.

In generale, è impossibile definire lo stile dei controlli con quel grado di accuratezza. Non sono a conoscenza di alcun browser che supporti una gamma ragionevole di proprietà in tutti i controlli. Questo è il motivo per cui esistono un miliardo di librerie JavaScript che "falsificano" i controlli dei moduli con immagini e altri elementi HTML ed emulano la loro funzionalità originale con il codice:

http://ryanfait.com/resources/custom-checkboxes-and-radio-buttons/

...

<select onchange="this.blur();">

Se lo usi, il bordo rimane finché non selezioni un elemento dall'elenco.

Prova uno di questi:

a:active {
 outline: none;
 -moz-outline: none;
}

a {
-moz-user-focus: none;
}

Riferimento

Ecco la soluzione

:focus {outline:none;}
::-moz-focus-inner {border:0;}

Rimuovi contorno / bordo tratteggiato da Firefox Tutti i tag selezionabili.

Inserisci questa riga di codice nel tuo foglio di stile:

*:focus{outline:none !important;}   

Aggiungi lo stile del bordo: nessuno alla tua selezione in CSS.

select {
border-style: none; }

    input[type='range']::-moz-focus-outer {
    border: 0;
    outline: none !important;
    }

lavorando al 100%

Questo rimuoverà il focus selectdall'elemento e dal contorno :

$("select").click(function(){
    $(this).blur();
});

Anche se questo non è privo di difetti su altri browser. Ti consigliamo di controllare il browser che l'utente sta utilizzando:

if (FIREFOX) {
    //implement the code
}