テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する

概要

Microsft EdgeやGogle Chromeではテキストボックスにフォーカスが入り編集状態になるとテキストボックスの外枠が太く表示されます。この記事ではフォーカス時の外枠の線の色やスタイルを変更するコードを紹介します。

テキストボックスのフォーカス時のスタイルはoutlineプロパティで設定されています。focus疑似クラスを利用してoutlineプロパティの設定を記述することでフォーカス時の枠のスタイルを変更できます。

プログラム

コード

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

TextBoxCustomFocusBorder.css

.TextBoxCustomFocusBorder:focus {
  outline:solid 2px #ff6a00;
}

TextBoxCustomFocusBorder.html

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

</body>
</html>

解説

テキストボックスのクラスをTextBoxCustomFocusBorderにしており、CSSで TextBoxCustomFocusBorderクラスのfocus疑似クラスを .TextBoxCustomFocusBorder:focus で記述しています。フォーカス時にオレンジ色で幅が2pixelの枠を表示します。

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図のページが表示されます。
テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する:画像1

マウスポインタをテキストボックスに重ねます。この時は表示は変化しません。

テキストボックスをクリックして編集状態にします。キャレットがテキストボックスに表示されます。フォーカスが入るのでオレンジ色の枠が表示されます。
テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する:画像3

テキストの編集中は枠が表示されています。

テキストボックス以外をクリックして、テキストボックスからフォーカスが無くなると、元のスタイルに戻ります。

別の例

CSSファイルを下記に変更した場合の表示結果です。

TextBoxCustomFocusBorder.css

  .TextBoxCustomFocusBorder:focus {
    outline: dashed 2px #ff6a00;
  }

点線にした場合、元のテキストボックスの外枠は残っていることが核にできます。元のテキストボックスの外枠はborderプロパティで設定されているためです。
テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する:画像5

Hoverと組み合わせる例

Hover疑似クラスと組み合わせて、マウスポインタがテキストボックスに重なると境界線の色を変更し、テキストボックスにフォーカスが入り、編集状態になった場合は境界線を別の色に変更します。

コード

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

TextBoxCustomHoverFocusBorder.css

.TextBoxCustomHoverFocusBorder:hover {
  border: solid 1px #0093e9;
}


.TextBoxCustomHoverFocusBorder:focus {
  border: solid 2px #ff6a00;
  outline: none;
}

TextBoxCustomHoverFocusBorder.html

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

解説

テキストボックスのクラスをTextBoxCustomHoverFocusBorder に設定し、マウスポインタが重なった場合のスタイルを :hover 疑似クラスを利用して CSSファイルの .TextBoxCustomHoverFocusBorder:hover に記述します。テキストボックスが編集状態になり、フォーカスが入った場合は、:focus疑似クラスを利用して、CSSファイルの .TextBoxCustomHoverFocusBorder:focus にスタイルを記述します。
今回のコードでは、マウスポインタが重なった場合は、外枠の色wお水色に変更し、テキストボックスにフォーカスが入ったときは2pxのオレンジ色の外枠を表示します。

表示結果

上記のHTMLをWebブラウザで表示します。下図のページが表示されます。
テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する:画像6

マウスポインタをテキストボックスに移動します。マウスポインタがテキストボックスに重なるとテキストボックスの外枠が水色に変わります。
テキストボックスが編集状態のときに表示される枠の色やスタイルを変更する:画像7

テキストボックスをクリックしてフォーカス状態になると、太いオレンジ色の枠が表示されます。