2009-12-09 16 views
11

ich diese CSS punktierten Grenzen entfernen bin mit Entfernen der als Hyperlinks angezeigt werdenpunktierten Grenzen auf Klick

a:active, a:focus, input { 
    outline: 0; 
    outline-style:none; 
    outline-width:0; 
} 

geklickt Dies funktioniert gut, aber auf Eingabetasten funktioniert nicht, die Hintergrundbilder haben.

Antwort

6

Es ist nicht mein Platz, um Ihre Design-Entscheidungen in Frage zu stellen, also hier gehen Sie.

Fügen Sie einfach diese zu einem Link der Sie die gepunktete Linie

onfocus="if(this.blur)this.blur()" 
+1

+1 @ user48202 Haben Sie eine CSS-Lösung dafür? :) – Roylee

6

Es funktioniert nicht gut. Es macht es unmöglich, das Design ohne Maus zu navigieren.

Siehe http://24ways.org/2009/dont-lose-your-focus für einen vernünftigen Kompromiss.

+0

Die Lösung in diesem Artikel ist das gleiche, was ich verwende aber mein Problem ist es nicht funktioniert auf Eingabetasten mit Hintergrundbildern entfernen möchten. – Shishant

4

Sie könnten ein onclick: blur(); hinzufügen, so dass es tab-happy bleibt und das Design nicht ruiniert, wenn Sie darauf klicken.

Aber für die Aufzeichnung scheint dies Cross-Browser zu funktionieren. Der erste Teil für IE, der zweite für FF:

input, input:active, input:focus{ 
    outline: 0; 
    outline-style:none; 
    outline-width:0; 
} 

button::-moz-focus-inner, 
input[type="reset"]::-moz-focus-inner, 
input[type="button"]::-moz-focus-inner, 
input[type="submit"]::-moz-focus-inner, 
input[type="file"] > input[type="button"]::-moz-focus-inner { 
    border: none; 
} 
0

Sie benötigen Klassen, um zu unterscheiden, welche Links gepunktete Grenzen haben und welche nicht. Die Verwendung der Bildauswahl ist nicht genug.

Formatieren Sie Ihre Eingabe-Tags so, dass sie keine gepunkteten Grenzen haben; Sie könnten sogar eine Klasse für Ihre Eingabe-Schaltflächen verwenden, wenn Sie mehr als einen Stil haben (Löschen, Senden, Abbrechen usw.)