CSSでフォーカス枠を消す方法
結論から言うと、対象要素にoutline:0;もしくはoutline:none;を設定すればフォーカス枠は消えます。
結果
HTML
CSS
-
枠あり(outline:1px dotted black;)
-
/* HTMLの例 */
枠あり(outline:1px dotted black;) -
/* CSSの例 */ .sample1 { outline:1px dotted black; }
結果
HTML
CSS
-
枠なし(outline:0;)
-
/* HTMLの例 */
枠なし(outline:0;) -
/* CSSの例 */ .sample1 { outline:0; }
outlineプロパティ
～ 色 ～
| outline-color値 | 説明 |
| ※色 | 境界線の色をキーワード(ex.red)、16進数、RGBA等により設定する |
～ 線種 ～
| outline-style値 | 説明 |
| none（初期値） | 境界線を表示しない |
| solid | 1本の実線が表示される |
| double | 2本の実線が表示される |
| dotted | 1本の点線が表示される |
| dashed | 1本の破線が表示される |
| groove | 凹立体線が表示される |
| ridge | 凸立体線が表示される |
| inset | 凹ボタンのような線が表示される |
| outset | 凸ボタンのような線が表示される |
～ 太さ ～
| outline-width値 | 説明 |
| ※サイズ | px、%、em等により設定する |
outlineプロパティの利用例
CSS
.sample3 {
outline: 1px solid black; /* 太さ・線種・色 */
}
太さ・線種・色の順番については決まりはなく、どれから指定しても問題ありません。
ブラウザがfirefoxの場合注意が必要です
そもそも規定ではoutlineの初期値はnoneです。このため本来、枠線を描きたいときだけoutlineプロパティを設定すれば良いはずです。しかし、firefoxについてはa(アンカー)、input等クリックや入力要素についてはその要素が選択されている時にデフォルトで枠線がつくようになっています。このため枠線をどの状態でも表示させないためには明示的にoutline:0;を設定する必要があります。Chrome、IE、Edgeではこの問題は発生しません。