Wie kann ich die gestrichelten Linien auf einer SELECT/OPTION-Auswahleingabe in Firefox entfernen?

Question

In Chrome and other browsers my dropdown looks fine:

Allerdings weist es in Firefox unerwünschte gestrichelte Linien auf:

Ich habe erfolgreich die unerwünschten Firefox gestrichelten Linien für Buttons und Input-Elemente mit diesen CSS-Anweisungen entfernt:

button::-moz-focus-inner { border: 0; }
input::-moz-focus-inner { border: 0; }

Also dachte ich, dass diese auch für die Select/Option-Elemente funktionieren würden, aber das tun sie nicht:

select::-moz-focus-inner { border: 0; }
option::-moz-focus-inner { border: 0; }

Wie kann ich die gestrichelten Linien in diesem Dropdown entfernen, damit es wie in Chrome und anderen Browsern aussieht?

Zusatz

Auch diese funktionieren nicht:

select::-moz-focus-inner { border: 0; outline: 0 }
option::-moz-focus-inner { border: 0; outline: 0 }

noch diese:

select { outline: 0; }
option { outline: 0; }

noch diese:

select { outline: none; }
option { outline: none; }

Answer 1

Die Antwort von James Broad ist fast perfekt, aber der "Nur-Schatten"-Text für die Optionsobjekte sieht hässlich aus. Das ist, was bei mir perfekt funktioniert:

select:-moz-focusring {
  color:transparent;
  text-shadow:0 0 0 #000; /* deine normale Textfarbe hier */
}
select:-moz-focusring * {
  color:#000; /* deine normale Textfarbe hier */
  text-shadow:none;
}

Answer 2

Hier ist der kombinierte Hack dafür:

select:focus {
    outline: 1px solid white;
    outline-offset: -2px;
}
select ~ input[type=button] {
    -moz-appearance: menulist-button;
    margin-left: -19px;
    width: 18px;
    height: 18px;
    z-index: 10;
}

Fügen Sie dann ein Eingabefeld mit tabindex=0 nach jedem Select-Feld hinzu Und etwas Code für "Delegation" des Fokus:

$("select ~ input[type=button]").addEvent('focus', function(){
  this.getPrevious().focus();
});

Answer 3

Die Lösung, die auf https://stackoverflow.com/a/18853002/728855 gefunden wurde, scheint perfekt zu funktionieren.

Kurz gesagt:

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

Wo #000 Ihre Textfarbe ist.

Answer 4

Im Falle der Verwendung von required, wie im folgenden Code:

    Wählen Sie eine Option aus
    Option

Müssen Sie die gleichen Parameter für select:required:invalid wie unten angegeben setzen:

select {
  &:required {
    &:invalid {
      color: transparent;
      text-shadow: 0 0 0 rgba(0, 0, 0, .4);
    }
  }

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 rgba(0, 0, 0, .4);
  }
}

Answer 5

Versuchen Sie outline: 0, zu verwenden, funktioniert für Schaltflächen