RSS 2.0 FeedDer gepunktete Rahmen des Submit-Buttons
Samstag, 19. Juni 2010
Der Firefox macht um den Absende-Button von Formularen einen gepunkteten Rahmen, wenn man den Button per Tabulator-Taste ansteuert.
Das kann im Falle eines sorgfältig gestaltetes Designs arg stören. Ein Beispiel ist der per CSS “rund gemachte” Absende-Button meines Suchformulars. (siehe diesen Beitrag.)
Ein eckiger Rahmen um einen runden Button, das sieht wirklich nicht gut aus.
Aber dieser Rahmen widersetzt sich sich allen Versuchen, ihn per CSS zu entfernen, recht störrisch.
Und es geht doch
Dirk Ginader hat es ganz kurz und trocken getwittert.
Die CSS Anweisung dazu lautet:
input[type=submit]::-moz-focus-inner {border: 1px dotted transparent;}
Ja, genau so. Auch wenn die Syntax fremd erscheint.
Wer nicht generell alle Submit-Buttons stylen will, sondern nur bestimmte mit id oder class ausgezeichnete Buttons, kann die CSS Anweisung natürlich entsprechend abändern. Für einen Button mit der Klasse senden :
.senden::-moz-focus-inner {border: 1px dotted transparent;}
bzw. für einen Button mit der id senden:
#senden::-moz-focus-inner {border: 1px dotted transparent;}
Wichtig: Bitte unbedingt sicherstellen, dass der Fokus, wenn nicht mittels des gepunkteten Rahmens, dann auf andere Art klar kenntlich gemacht wird! Dies ist unentbehrlich für Tastatur-Nutzer, damit sie den Fokus sehen, d. h. wissen, welches Seitenelement gerade aktiv ist.
PS: Kennt jemand eine Methode, den Rahmen auch für Webkit (Chrome, Safari) und Opera zu entfernen. Nach dem IE frag’ ich erst gar nicht. Dort fällt es übrigens gar nicht so sehr ins Gewicht, weil der IE ohnehin den per CSS rund gestalteten Submit-Button nicht darstellen kann.
3 Kommentare
Einen Kommentar abgeben
XHTML erlaubt: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote> <code> <em> <i> <strike> <strong>
Code-Beispiele
Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu <).
für Webkit gibt es eine Lösung:
Erst mal bei allen Elementen die es betrifft, die Outline abschalten:
element:focus { outline: 0; }
Dann im Safari-StyleSheet
element:focus {
outline: auto 5px -webkit-focus-ring-color;
outline-offset: -2px;
}
die Outline wieder setzen.
Für den Opera gibt’s dafür leider keine Lösung, hier lässt sich die Outline zu keinem Zeitpunkt beeinflussen!!
Für Interessierte:
Nachstehend die komplette Syntax für den Firefox
button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="image"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
border: none;
}
Referenz: http://www.ag-energy-network.de/
Viel Spaß Werner
Kommentar von Werner Schmidt — Montag, 28. Juni 2010 - 8:23 Uhr
Nachtrag:
Lösung IE8:
a:focus, input:focus, textarea:focus, select:focus {
outline: 3px solid #5c9ccc;
}
a:hover, a:active {
outline: 0;
}
Lösung IE7:
a.hidefocus { outline: expression(this.hideFocus=1); }
Lösung IE6:
a.hidefocus {text-decoration: expression(hideFocus=’true’); }
immer noch viel Spaß
Werner
Kommentar von Werner Schmidt — Montag, 28. Juni 2010 - 8:30 Uhr
Nachtrag
Habe nun endlich auch Opera und IE9 im Griff:
a:focus, input:focus, textarea:focus, select:focus {
border-radius: 2px;
box-shadow: 0 0 3px 3px rgba(85,165,243,0.5);
box-decoration-break: clone;
}
input:focus, textarea:focus, select:focus {
border: solid 1px #fff;
}
Referenz: http://www.gold-gold-gold.de/support/email/kontakt
Gruß Werner
Kommentar von WErner — Mittwoch, 23. Februar 2011 - 19:13 Uhr