Entfernen Sie gepunktete Umrisse vom Bereichseingabeelement in Firefox

73

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/

alexandrrr
quelle
4
Kannst du eine Geige zeigen? Hier gibt es keine Umrisse: jsfiddle.net/tGUAR
Yuriy Galanter
3
@ Zweiundvierzig bedeutet nicht, dass Sie sie nicht entfernen oder selbst neu gestalten sollten.
Nijikokun
2
Wenn Sie alle Stile entfernen, die Sie ursprünglich veröffentlicht haben (dh die Eingabe nicht formatiert lassen), gibt es in Firefox für Mac überhaupt keine Gliederung.
Ralph.m
4
@alexandrrr Firefox 27.0 (Windows), keine Gliederung in Ihrem Beispiel.
Itay Gal

Antworten:

108

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;
    }
adriaan
quelle
Vielen Dank; Du bist völlig richtig. (Ich habe es jedoch kommentiert.)
27

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/

dugokontov
quelle
1
Ich kann ::-moz-focus-outerArbeiten wie erwartet bestätigen . Dies sollte die akzeptierte Antwort sein.
Bogdan
18

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/

ausi
quelle
Ja es funktioniert. Dies ist die erste Problemumgehung, die funktioniert. Herzliche Glückwünsche!
TLindig
Aber du hast ein springendes Element wegen der zusätzlichen Grenze. Ohne diesen Rand wird der Schieberegler zugeschnitten. siehe hier: jsfiddle.net/pF37g/100
TLindig
3
Die Stile müssen für alle Zustände ( input[type=range]) angewendet werden , nicht nur für :focus, wie Sie in meinem JsFiddle
ausi
Sie sollten Rand verwenden: 1px fest transparent; zur Vermeidung zukünftiger Designprobleme
Facundo Colombier
2
@FacundoColombier Der Rand wird verwendet, um 1 Pixel Platz für die Gliederung hinzuzufügen. Der Umriss liegt über dem Rand, daher spielt die Randfarbe keine Rolle.
Ausi
7

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/

Ryan Wheale
quelle
2
Wenn Sie durch die Seite blättern und die Bereichseingabe den Fokus erhält, wird das Ansichtsfenster zum außen positionierten Element gescrollt. Siehe jsfiddle.net/pF37g/102
ausi
1
@ausi - das ist ein toller Punkt. Mein Vorschlag wäre, es einfach außer Sichtweite zu bringen ( Geige ). Ich denke, 100em ist ein bisschen übertrieben, aber es ist ein sehr guter Punkt, besonders für Leute wie mich, die es gewohnt sind, Dinge wie zu tippen text-indent: -1000em. note translateX unterbricht die Benutzerfreundlichkeit des Daumens (wahrscheinlich verwendet b / c FF translateX, um den Daumen zu positionieren). Versuchen Sie also nicht translateX.
Ryan Wheale
3

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/

Shalom Aleichem
quelle
2
Leider kann ich den gepunkteten Umriss immer noch sehen (Mac, Firefox 23).
Alexandrrr
Ich kann immer noch die Gliederung sehen, Linux, FF 74
Choylton B. Higginbottom
3

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

Francis Kim
quelle
Dies ist nicht der Fall, und die Regel ist zunächst nicht sinnvoll. ::-moz-focus-innerund :-moz-focusringwird dazu führen, dass das Ganze von jedem WebKit-basierten Browser ignoriert wird und -webkit-*Eigenschaften von Firefox offensichtlich nicht unterstützt werden. Möglicherweise verwenden Sie einen Browser / ein Betriebssystem / eine andere Umgebung, in der zunächst kein Fokusring für Schiebereglerelemente angezeigt wird, wenn diese Geige für Sie funktioniert.
@Charmander Die Selektoren stimmen mit der ursprünglichen Frage überein.
Francis Kim
Ah, danke, dass Sie darauf hingewiesen haben. Sie haben also eine Reihe von WebKit-Eigenschaften für eine Frage zum Entfernen von Firefox-Fokusringen hinzugefügt. Firefox ist kein WebKit-basierter Browser. Die Rendering-Engine ist Gecko, und die oben erläuterte Kombination der beiden Präfixsätze macht beide gleichermaßen unwirksam.
Ich habe die JSFiddle
Francis Kim
1
Danke, ich habe es gesehen. Es tut mir leid, wenn meine ersten beiden Wörter nicht klar genug waren, aber es funktioniert nicht und es gibt keinen Grund, warum es funktionieren sollte. Wenn es für Sie funktioniert, überprüfen Sie bitte, ob es an Ihrer CSS-Regel liegt und nicht an den Auswirkungen auf den Rest Ihrer Umgebung. Dies gilt insbesondere, wenn Sie in einem WebKit-basierten Browser surfen, da die Frage, wie oben noch einmal erwähnt, mit Firefox zu tun hat .
3

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

MDW
quelle
0

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/

TLindig
quelle
-1

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;
}
Milad
quelle
Vielleicht sollten Sie Ihre vorgeschlagenen Lösungen ausprobieren, bevor Sie (falsch) mit ihnen antworten.
-3

Hier kommt die Lösung

:focus {
    outline:none;
}

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