Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Der 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.)
Screenshot

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

Screenshot

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

  1. 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

  2. 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

  3. 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

Einen Kommentar abgeben

Damit Code-Beispiele richtig angezeigt werden, müssen Sonderzeichen maskiert werden (z.B. < zu &lt;).


(notwendig)

(notwendig)

Spamschutz:
Je nach Inhalt wird Ihr Kommentar eventuell nicht sofort angezeigt, sondern muss manuell freigeschaltet werden.

Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE