ホームページ >ウェブフロントエンド >CSSチュートリアル >ハイパーリンクまたはボタンをクリックしたときに表示される点線の境界線を削除します
ハイパーリンクまたはボタンをクリックしたときに表示される点線の境界線を削除します
- 巴扎黑オリジナル
- 2017-04-05 16:54:012054ブラウズ
フロントエンドの制作プロセス中に、一部のテキスト/画像リンク、または一部の入力コントロールをクリックすると、その周囲に点線の境界線が表示されます。通常、Firefox および IE ブラウザーでは点線の境界線が表示されますが、Google では点線の境界線が表示されません。
これらの点線の境界線は、視覚的なデザインの補助として使用され、マウスを使用せずにキーボードの Tab キーを使用してページを参照すると、現在のリンクまたはコントロールの位置がマークされ、参照しやすくなります。これは視覚障害のある人にとってはさらに重要です。
しかし、ブラウザーが点線のボックスを異なる方法で不規則に解釈するため、それらを使用したくない場合もあります。これは視覚的なデザインの欠陥になります。したがって、現時点では、視聴者が完璧に視覚的に楽しめるように、これらの点線の境界線を無効にしたいと考えています。
ハイパーリンクまたはボタンをクリックしたときに表示される点線の境界線を削除する純粋な CSS
<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>
上記のコードからもわかるように、CSS属性のアウトラインを設定することで解決できます。
FF にはバグがあり、入力とボタンのラベルがプライベート属性::-moz-focus-inner を通じて特別に処理されます
上記の方法は IE6 および IE7 では無効です。これは、次のように onfocus 属性を使用して解決できます。 admin10000.com
jquery メソッドを使用するには 1 つの文しか必要とせず、非常にシンプルで、すべてのブラウザをサポートしています
$("a,input,button").focus(function(){this.blur()});
以上がハイパーリンクまたはボタンをクリックしたときに表示される点線の境界線を削除しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。