Chrome / Edge Webブラウザーでフォーカスされたボタンの内側に点線を描画する - CSS
Google Chrome, Microsoft Edge Webブラウザで、フォーカスされたボタンの内側に点線を描画するコードを紹介します。
概要
Internet Explorer ではボタンにフォーカスが設定されると、ボタンの内側に点線が描画されます。
一方、Google ChromeやMicrosoft Edgeでは、外枠の線幅が太くなります。
この記事では、Google ChromeやMicrosoft Edge でInterenet Explorerと同様に、フォーカスが設定されたボタンの内側に点線を描画するコードを紹介します。
Microsoft Edgeでボタンにフォーカスがある場合の表示 Internet Explorerでボタンにフォーカスがある場合の表示 方法
要素の内側に点線を描画するには
outline-offset プロパティに負の数値(マイナスの値)を設定します。
実装例
コード
.buttonClass:focus {
outline: 1px dotted gray;
outline-offset: -3px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="button-no-focus-frame-inside-line.css" />
</head>
<body>
<form>
<input type="text" />
<input class="buttonClass" type="button" value="Exec" />
</form>
</body>
</html>
解説
focus 疑似クラスを利用し、フォーカスがある場合のスタイルを指定します。
.buttonClass:focus {
/* 中略 */
}
点線の枠を設定します。
outline: 1px dotted gray;
outline-offset プロパティを指定するとアウトラインの枠を描画する位置を変更できます。負の値を設定することで枠の内側にoutlineの枠線を描画できます。
outline-offset: -3px;
表示結果
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
ボタンにフォーカスが設定された状態では下図の表示になります。ボタンの内側に点線が表示されることが確認できます。
参考:Internet Explorer での表示
上記のMicrosoft Edge / Chrome でフォーカス時のボタンの内側に点線を表示するHTMLファイルをInternet Explorer で表示した場合を確認します。
下図のページが表示されます。Internet Explorerでは、
outline-offset プロパティに対応していないため、点線はボタンの外枠部分に表示される動作となります。
著者
iPentecのメインデザイナー
