Entfernen Sie gepunktete Umrisse vom Bereichseingabeelement in Firefox

Firefox unterstützt seit Version 23 das <input type="range">Element von Haus aus, aber ich konnte nicht herausfinden, wie der gepunktete Umriss entfernt werden kann. Das folgende CSS hat keine Auswirkung:

input[type='range'], 
input[type='range']:focus, 
input[type='range']:active, 
input[type='range']::-moz-focus-inner, 
input[type='range']:-moz-focusring {
    border: 0;
    outline: none;
}

Hat jemand eine Idee, wie man dieses Problem in Firefox behebt?

Beispiel: http://jsfiddle.net/pF37g/

Das kannst du leider nicht! (Update; Sie können jetzt)

Es ist ein Fehler in Firefox und es gibt keine Problemumgehung, um dies zu beheben, außer die Quellbasis selbst zu reparieren (siehe unten).

Siehe auch Jonathan Watt's Blog (der daran arbeitet):

Bekannte Probleme:

• Das standardmäßige Erscheinungsbild im CSS-Stil muss noch bearbeitet werden, und das native Theming (das dem Schieberegler das Erscheinungsbild des Betriebssystemthemas verleiht) steht noch aus ...

In einer Antwort auf einen Kommentar in seinem Blog zu diesem Thema erklärt er:

Im Moment kannst du nicht - sorry. Ich habe den Fehler 932410 eingereicht , um dies zu ermöglichen.

Zum Zeitpunkt des Schreibens scheint diesbezüglich keine Fortschritte zu verzeichnen, und es ist nicht bekannt, wann ein offizieller Fix verfügbar sein wird.

Aktualisieren

Seit diese Antwort veröffentlicht wurde, wurde der Fehler behoben. Sie können jetzt verwenden (wie in anderen Antworten angegeben, aber der Vollständigkeit halber füge ich es hier ein):

input[type=range]::-moz-focus-outer {
    border: 0;
    }

Dies kann mit einer neuen Version von Firefox erfolgen. Wie hier angegeben , ist dieser Fehler behoben. So ist es möglich, den äußeren gepunkteten Rand auszublenden. Setzen Sie dazu ::-moz-focus-outerden Rand wie folgt auf 0:

input[type=range]::-moz-focus-outer {
    border: 0;
}

Hier ist ein Arbeitsbeispiel: http://jsfiddle.net/n2dsc/1/

In Webkit-Browsern wird die äußere Zeile angezeigt, wenn diese Option -webkit-appearance: none;festgelegt ist. Um es zu entfernen, setzen Sie einfach den :focusUmriss wie folgt auf none:

input[type=range]:focus {
    outline: none;
}

Hier ist ein Arbeitsbeispiel: http://jsfiddle.net/8b5Mm/1/

Wie Ken bereits betont hat, gibt es keine Möglichkeit, den Umriss zu entfernen. Es gibt jedoch eine Problemumgehung, um den Umriss zu "verbergen", wenn Sie die Hintergrundfarbe des übergeordneten Elements kennen. Unter der Annahme eines weißen Hintergrunds würde das folgende CSS den gepunkteten Umriss verbergen:

input[type=range] {
    border: 1px solid white;
    outline: 2px solid white;
    outline-offset: -1px;
}

Ihr aktualisiertes Beispiel: http://jsfiddle.net/9fVdd/15/

Wenn Sie sich mit einem Wrapping-Element zufrieden geben können (wahrscheinlich haben Sie bereits ein Wrapping-Element LIoder P), können Sie die Eingabe nur mit FireFox-CSS außerhalb der Ansicht positionieren und die Spur / den Daumen in der Ansicht neu positionieren.

• Hinweis 1 - versuchen Sie es nicht translateX- ich denke, FireFox verwendet dies, um den Daumen tatsächlich zu schieben - bleiben Sie also dabeitranslateY
• Hinweis 2 - Testen Sie unbedingt mit der Tastaturnavigation. Sie sollten die Eingabe nur um den kleinstmöglichen Betrag verschieben, um die gepunkteten Linien außer Sichtweite zu bringen . Wenn Sie es weit weg positionieren ( translateY(-1000em)), wird die Benutzerfreundlichkeit für die Tastaturnavigation beeinträchtigt .

Hier gehts:

HTML

<span class="range-wrap"><input type="range" /></span>

CSS

.range-wrap {
    overflow: hidden;
}
input[type='range'] {
    -moz-transform: translateY(-3em);
}
input[type='range']::-moz-range-track {
    -moz-transform: translateY(3em)
}
input[type='range']::-moz-range-thumb {
    -moz-transform: translateY(3em);
}

http://jsfiddle.net/pF37g/98/

Gepunktete Umrisse sind kein Problem. Der Browser zeigt an, dass das Eingabeelement ausgewählt ist. Was Sie tun können, ist tabIndex-1, wodurch verhindert wird, dass sich Ihr inputElement auf die Registerkarte konzentriert und folglich die Gliederung erhält :

<input class="size" type="range" tabIndex="-1" name="size" min="1" max="6" value="6"></input>

Danach verlieren Sie jedoch die Tastaturzugänglichkeit. Es ist besser, die inputElementtastatur zugänglich zu haben .

Hier ist die Geige: http://jsfiddle.net/pF37g/14/

Wenn ein benutzerdefiniertes Styling angewendet wird, verwendet input[type='range']Firefox ein anderes Modell (Beta) , um die Bereichseingabe zu rendern.

Sie können die 2 verschiedenen Modelle hier sehen:

http://jsfiddle.net/pF37g/75/

Derzeit glaube ich nicht, dass es derzeit möglich ist, ein benutzerdefiniertes Eingabebereichsfeld im CSS-Stil in Firefox zu verwenden, das outline: 0;ab Firefox 27.0 eingehalten werden kann

Um es zu vervollständigen: Der Fehler wurde behoben und jetzt funktioniert es mit:

input[type=range]::-moz-focus-outer { border: 0; }

Um alle Umrisse von allen Eingabe-Tags zu entfernen, verwenden Sie:

input::-moz-focus-inner, input::-moz-focus-outer { border: none; }

Quelle: https://bugzilla.mozilla.org/show_bug.cgi?id=932410#c7

Du kannst nicht. Es scheint ein Fehler in Firefox zu sein.

Es werden zwei Umrisse für das Bereichselement erstellt. Eine, die Sie durch die CSS-Einstellung beeinflussen können, und eine zweite, die gegen Manipulationen resistent ist.

Ich habe den Umriss sichtbar gemacht, um die Probleme zu zeigen: input[type='range']:focus { outline: 5px solid green; }

Hier können Sie es sehen:

http://jsfiddle.net/pF37g/97/

Ich habe wenig Forschung in der Konfiguration Abschnitt von Mozilla hinzufügen dies auch

 :-moz-any-link:focus {
    outline: none;
 }
 a, a:active, a:visited, a:hover {
    outline: 0;
}

dann

:focus {
   outline: none;
}

dann

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

Hier kommt die Lösung

:focus {
    outline:none;
}

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