So entfernen Sie die Schaltflächenkontur in Opera on focus
Weiß jemand, wie man die gepunktete Umrandung der Knöpfe in Opera entfernt?
12 Antworten
Die Einführung des Artikels Verlieren Sie nicht den Fokus
Für viele Webdesigner ruft die Barrierefreiheit Bilder von blinden Benutzern mit Screenreadern hervor und die Schwierigkeiten, Websites für diese Zielgruppe zugänglich zu machen. Barrierefreiheit deckt natürlich eine Vielzahl von Situationen ab, die über das extreme Beispiel von Screenreadern hinausgehen. Und obwohl es wahr ist, dass eine komplexe Website zugänglich zu machen, oft eine entmutigende Aussicht ist, gibt es auch viele kleine Dinge, die nichts mehr als ein bisschen vernünftige Planung nehmen, sind sehr einfach zu testen (ohne teure Hilfstechnologie zu kaufen) ), und kann für bestimmte Benutzergruppen den Unterschied ausmachen.
In diesem kurzen Artikel konzentrieren wir uns auf die Barrierefreiheit der Tastatur und darauf, wie die unvorsichtige Verwendung von CSS Ihre Websites möglicherweise völlig unbrauchbar machen kann.
Und die Liste der Tests, die der Artikel auf der Gliederungsverwaltung gibt.
Update 2011-02-08
Ich kann bestätigen, dass es momentan nicht möglich ist. Es gibt einen offenen Fehler dafür.
Ich sage das mit der klaren Maßgabe, dass Sie den Umriss nicht entfernen sollten, wenn Sie ihn nicht durch etwas anderes ersetzen, das den Fokuszustand anzeigt ...
Wenn Sie eine Transformation auf das Element anwenden, wird die Umrandung in der Oper gelöscht. es muss nicht einmal eine sichtbare Transformation machen, lediglich das Anwenden der Eigenschaft ist genug. Also wird das den Job machen:
%Vor%Aber ich kann nicht versprechen, dass dies nicht als ein Rendering-Fehler betrachtet wird, und folglich etwas, das sich in der Zukunft ändern kann.
Ich glaube, das Problem liegt darin, wo Sie die Umrisseigenschaften angeben. Versuchen Sie Folgendes:
%Vor%Ich habe das mehr recherchiert und es sieht so aus, als würde es in Eingabefeldern und Buttons funktionieren, es sei denn, du bearbeitest die Konfiguration des Browsers, wie die about: config-Seite von Firefox. Es scheint aus Zugänglichkeitsgründen so zu sein, dass eine Tastatur verwendet werden kann, um ein Formular auszufüllen und zu senden, ohne eine Maus zu benutzen.
Ich habe diesen Trick oben für meinen Textbereich verwendet und es hat gut funktioniert! Benutze einen Textbereich mit einer ID "itens", hier geht es!
%Vor%So können Sie damit spielen:
%Vor%Neben meinem Tipp oben - mit Erfahrung habe ich festgestellt, dass es nicht immer funktioniert, und es ist sowieso nicht immer angebracht, da es die Art, wie das Element auf subtile und manchmal unangenehme Weise wiedergegeben wird, verändern kann / p>
Wenn das nicht funktioniert, können Sie auch die Umrissfarbe als "rgba (0,0,0,0)"
angebenWenn Sie css-reset in Ihrem Stylesheet anhängen, sollte das Problem gelöst werden.
Dies ist weniger eine Antwort und mehr eine Erklärung dafür, was zu tun scheint:
Die Geschichte
Mein Grund, die Umrisse der Oper zu entfernen, bestand darin, einen eigenen Entwurf hinzuzufügen. Um eine Gliederung hinzuzufügen, habe ich verwendet:
%Vor% Das funktioniert in jedem anderen Browser einwandfrei ... außer Opera. Opera gibt Ihnen stattdessen dieses seltsame Interferenzmuster, das wie ein dotted-dashed outline aussieht:
jetzt, wenn Sie Ihre Gliederung entfernen, haben Sie immer noch den Standard-Umriss, den Opera bietet, eine schöne einfache 1px beabstandete gepunktete Linie:
Da ich außer Opera keine Möglichkeit habe, einen Stil zu jedem Browser hinzuzufügen, entschied ich mich stattdessen, Operas Umriss zu entfernen, bevor ich meinen eigenen hinzufüge. Verwenden Sie dazu die brothercake -Lösung, -o-transform:rotate(0); , und wenden Sie dann meine eigene Gliederung an:
Voila!
Eine Erklärung?
Nach allem, was ich sagen kann, fügt Opera eine eigene sekundäre Gliederung hinzu, die auf einer von CSS definierten Gliederung liegt.
Dieser sekundäre Umriss scheint eine unabhängige Farbe, Breite, Stil und Offset zu haben.
Die Farbe ist das Gegenteil des Hintergrunds,
Die Breite ist 1px ,
Stil ist dotted ,
und der Offset ist 2px kleiner als der Rand.
Entschuldigung, es gibt kein Style-Bild, der Upload funktionierte nicht richtig
Eine interessante Sache ist, dass der dotted Stil des Opera outline nicht derselbe wie der gepunktete CSS Umriss ist, sonst würde es kein Interferenzmuster mit beiden geben:
Fazit:
Wie oben erwähnt, verwende ich brothercake 's Lösung, die den Opera-Rand mit:
Wie er in seinem späteren Kommentar erwähnt hat, hat diese "Korrektur" einige Probleme, da es sich um einen Rendering-Fehler handelt:
Ich habe festgestellt, dass die Opera-Gliederung wieder angezeigt wird, wenn die Schaltfläche oder der Fokus auf die Seite mit der Schaltfläche if zurückgesetzt wird / p>