Entfernen Sie den gepunkteten Rand, der erscheint, wenn auf einen Hyperlink oder eine Schaltfläche geklickt wird-CSS-Tutorial-php.cn

Entfernen Sie den gepunkteten Rand, der erscheint, wenn auf einen Hyperlink oder eine Schaltfläche geklickt wird

巴扎黑

Freigeben： 2017-04-05 16:54:01

Original

2009 Leute haben es durchsucht

Während des Frontend-Produktionsprozesses werden Sie feststellen, dass einige Text-/Bildlinks oder einige Eingabesteuerelemente beim Klicken einen gepunkteten Rahmen haben. Im Allgemeinen werden gepunktete Rahmen unter Firefox- und IE-Browsern angezeigt, nicht jedoch unter Google.

Diese gepunkteten Ränder dienen als Hilfsmittel für die visuelle Gestaltung. Wenn Sie die Seite mit der Tabulatortaste durchsuchen, ohne die Maus zu verwenden, wird die Position des aktuellen Links oder Steuerelements zum einfachen Durchsuchen markiert. Dies ist umso wichtiger für Menschen mit Sehbehinderungen.

Aber manchmal möchten wir sie nicht verwenden, weil Browser gepunktete Kästchen unterschiedlich und unregelmäßig interpretieren, was zu einem Fehler im visuellen Design führt. Daher möchten wir diese gepunkteten Ränder zu diesem Zeitpunkt deaktivieren, damit der visuelle Genuss für den Betrachter einwandfrei ist.

Reines CSS entfernt den gepunkteten Rahmen, der erscheint, wenn auf einen Hyperlink oder eine Schaltfläche geklickt wird

<style type="text/css">
a,input,button{ outline:none; }
::-moz-focus-inner{border:0px;}
</style>
</head>
<body> 
<a href="http://www.admin10000.com" target="_blank"><img src="http://www.admin10000.com/skin/logo.jpg" border="0"></a>
<a href="http://www.admin10000.com" target="_blank">admin10000.com</a>
<input type="button" value="admin10000.com"/>
<button>admin10000.com</button>
</body>

Nach dem Login kopieren

Wie aus dem obigen Code ersichtlich ist, kann das Problem durch Festlegen des CSS-Attributs „outline“ gelöst werden.

Es gibt einen Fehler in FF, bei dem die Eingabe- und Schaltflächen-Tags speziell über das private Attribut::-moz-focus-inner

verarbeitet werden Die obige Methode ist unter IE6 und IE7 ungültig. Es kann mithilfe des onfocus-Attributs wie folgt gelöst werden:

admin10000.com

Die Verwendung der JQuery-Methode erfordert nur einen Satz, sie ist sehr einfach und unterstützt alle Browser

$("a,input,button").focus(function(){this.blur()});

Das obige ist der detaillierte Inhalt vonEntfernen Sie den gepunkteten Rand, der erscheint, wenn auf einen Hyperlink oder eine Schaltfläche geklickt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!