Heim > Artikel > Web-Frontend > Entfernen Sie den gepunkteten Rand, der erscheint, wenn auf einen Hyperlink oder eine Schaltfläche geklickt wird

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

巴扎黑Original: 2017-04-05 16:54:012006Durchsuche

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Zusammenfassung der CSS-Clear-Float-MethodenNächster Artikel：Zusammenfassung der CSS-Clear-Float-Methoden

In Verbindung stehende Artikel

Mehr sehen