Entfernen Sie den Umriss aus dem Auswahlfeld in FF

Ist es möglich, die gepunktete Linie um ein ausgewähltes Element in einem ausgewählten Element zu entfernen?

Ich habe versucht, das hinzuzufügen outline Eigenschaft in CSS aber es hat nicht funktioniert, zumindest nicht in FF.

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

Update
Bevor Sie fortfahren und die Gliederung entfernen, lesen Sie diese bitte.
http://www.outlinenone.com/

Ich habe eine Lösung gefunden, aber sie ist die Mutter aller Hacks. Hoffentlich dient sie als Ausgangspunkt für andere robustere Lösungen. Der Nachteil (meiner Meinung nach zu groß) ist, dass jeder Browser, der nicht unterstützttext-shadow aber unterstützt rgba(IE 9), den Text nur dann rendert, wenn Sie eine Bibliothek wie Modernizr verwenden (nicht getestet, nur eine Theorie).

Firefox verwendet die Textfarbe, um die Farbe des gepunkteten Rahmens zu bestimmen. Sagen Sie also, wenn Sie ...

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

Firefox macht den gepunkteten Rand transparent. Aber natürlich ist Ihr Text auch transparent! Also müssen wir den Text irgendwie anzeigen. text-shadowkommt zur Rettung:

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

Wir setzen einen Textschatten ohne Versatz und ohne Unschärfe, so dass der Text ersetzt wird. Natürlich verstehen ältere Browser nichts davon, daher müssen wir einen Fallback für die Farbe bereitstellen:

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

Dies ist, wenn IE9 ins Spiel kommt: Es unterstützt, rgbaaber keinen Textschatten, so dass Sie ein scheinbar leeres Auswahlfeld erhalten. Holen Sie sich Ihre Version von Modernizr mit text-shadowErkennung und tun Sie ...

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

Genießen.

Nun, Duopixels Antwort ist einfach perfekt. Wenn wir noch einen Schritt weiter gehen, können wir es kugelsicher machen.

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

Los geht's, nur gültig für Firefox und der hässliche gepunktete Umriss um die ausgewählte Option ist verschwunden.

Hier finden Sie eine Zusammenstellung von Lösungen zur Behebung von Stilproblemen mit Firefox-Auswahlfeldern. Verwenden Sie diesen CSS-Selektor als Teil Ihres üblichen CSS-Resets.

Die Klasse entfernt die Gliederung gemäß der Frage, aber auch alle Hintergrundbilder (da ich normalerweise einen benutzerdefinierten Dropdown-Pfeil verwende und der Dropdown-Pfeil des Firefoxes-Systems derzeit nicht entfernt werden kann). Wenn Sie ein Hintergrundbild für etwas anderes als ein Dropdown-Bild verwenden, entfernen Sie einfach die Liniebackground-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;
    }
}

Im Allgemeinen können Formularsteuerelemente nicht mit dieser Genauigkeit formatiert werden. Mir ist kein Browser bekannt, der einen sinnvollen Bereich von Eigenschaften in allen Steuerelementen unterstützt. Das ist der Grund, warum es eine Unmenge von JavaScript-Bibliotheken gibt, die Formularsteuerelemente mit Bildern und anderen HTML-Elementen "fälschen" und ihre ursprüngliche Funktionalität mit Code emulieren:

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

...

Dies zielt auf alle Firefox-Versionen ab

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

Möglicherweise möchten Sie das! Wichtige entfernen, wenn Sie planen, dass die Gliederung auf anderen Seiten Ihrer Website angezeigt wird, die dasselbe Stylesheet verwenden.

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

Wenn Sie dies verwenden, bleibt der Rahmen so lange bestehen, bis Sie ein Element aus der Liste auswählen.

Probieren Sie eines davon aus:

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

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

Referenz

Hier kommt die Lösung

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

Entfernen Sie den Umriss / gepunkteten Rand von Firefox All Selectable Tags.

Fügen Sie diese Codezeile in Ihr Stylesheet ein:

*:focus{outline:none !important;}   

Randstil hinzufügen: Keine zu Ihrer Auswahl in CSS.

select {
border-style: none; }

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

100% arbeiten

Dadurch wird der Fokus vom selectElement und der Gliederung entfernt :

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

Dies ist jedoch nicht ohne Mängel bei anderen Browsern. Sie sollten den Browser überprüfen, den der Benutzer verwendet:

if (FIREFOX) {
    //implement the code
}