iPentec.com / Doc / HTML / CSS / HTML テキストボックス

テキストボックスのフォーカス時の太線の外枠を表示しないようにする - HTML

Microsoft EdgeやGoogle Chromeでフォーカスされたテキストボックスの太い線の外枠を表示しないようにするコードを紹介します。

デフォルトの動作

コード

デフォルトの動作を確認します。下記のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  テストページ<br/>
  <input type="text" />
</body>
</html>

表示結果(Google Chrome / Microsoft Edgeの場合)

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。

テキストボックスをクリックしてテキスト編集状態になると、テキストボックスの枠が太線に変わります。

テキストボックスに文字列を入力します。

Webページのテキストボックス以外の部分をクリックすると、ボタンのフォーカスが外れます。ボタンのフォーカスが無くなると、元の細い枠線に戻ります。

表示結果(Microsoft Internet Explorer の場合)

同じHTMLでInternet Explorerの場合の表示を確認します。HTMLを表示すると下図のページが表示されます。

テキストボックスをクリックしてテキストボックスをフォーカス状態にします。テキストボックスの外枠の色が濃い色に変わりますが、テキストボックスの枠線の幅は変化しません。

フォーカス時に枠線を表示しない方法

上記の動作がデフォルトの動作ですが、Internet Explorerのようにテキストボックスがフォーカスされた場合でも枠線を表示したくない場合があります。フォーカス時に枠線を太くしないコードを紹介します。

コード

下記のHTMLとCSSファイルを作成します。

TextBoxNoOutline.css

.NoOutineTextBox:focus {
  outline:none;
}

TextBoxNoOutline.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
  <link rel="stylesheet" href="TextBoxNoOutline.css" />
</head>
<body>
  テストページ<br/>
  <input type="text" class="NoOutineTextBox"/>
</body>
</html>

解説

テキストボックスに NoOutineTextBox をクラスに指定します。
スタイルシートでは NoOutineTextBoxクラスの focus 疑似クラスを記述して、NoOutineTextBoxクラスの要素がフォーカスした場合のスタイルを設定します。フォーカス時のテキストボックスの外枠はoutlineプロパティで描画されていますので、outline:none; を記述してoutlineの外枠を表示しない動作とします。