Internet Explorer でフォーカスされたボタンのように、フォーカス時にボタンの内側に点線を描画する方法こちらの記事を参照してください。
Microsoft EdgeやGoogle Chromeでフォーカスされたボタンの太い線の外枠を表示しないようにするコードを紹介します。
デフォルトの動作を確認します。下記のHTMLファイルを作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form>
<input type="text" />
<input type="button" value="Exec" />
</form>
</body>
</html>
上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
テキストボックスをクリックするとテキストボックスにフォーカスが設定されます。テキストボックスの枠線が太く変化します。
テキストボックスにフォーカスが設定されている状態で[TAB]キーを押下します。フォーカスが次のコントロールのボタンに移動します。
ボタンにフォーカスが設定されるとボタンの外枠の線幅が太くなります。
Internet Explorerでの表示も確認します。上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
テキストボックスをクリックしてフォーカスを設定します。テキストボックスの枠線の色が濃くなりますが、枠線の太さは変わりません。
テキストボックスにフォーカスが設定されている状態で[TAB]キーを押下します。フォーカスが次のコントロールのボタンに移動します。
ボタンにフォーカスが設定されるとボタンの内側に点線の枠が表示されます。ボタンの外枠の枠線は太くなりません。
上記の動作がデフォルトの動作ですが、Internet Explorerのようにテキストボックスがフォーカスされた場合でも枠線を表示したくない場合があります。
フォーカス時に枠線を太くしないコードを紹介します。
フォーカス時に枠線を表示しない場合は、outlineプロパティを none または 0 に設定します。
下記のHTMLとCSSファイルを作成します。
.buttonClass:focus{
outline:0;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="button-no-focus-frame.css" />
</head>
<body>
<form>
<input type="text" />
<input class="buttonClass" type="button" value="Exec" />
</form>
</body>
</html>
ボタンに buttonClass をクラスに指定します。
スタイルシートでは buttonClassクラスの focus 疑似クラスを記述して、buttonClassクラスの要素がフォーカスした場合のスタイルを設定します。
フォーカス時のボタンの外枠はoutlineプロパティで描画されていますので、outline:0; を記述してoutlineの外枠を表示しない動作とします。
上記のHTMLファイルをWebブラウザで表示します。
ページが表示されますので、テキストボックスにフォーカスを設定し[TAB]キーを押します。フォーカスがボタンに移動しますが、
スタイルが設定されているため、枠線が太くならないことが確認できます。
