Chromeなどで、テキストエリアのフォーカス時に枠線を自動付加させたくない

ChromeやOperaなど一部のブラウザでは、フォーカスのあるテキスト入力欄(＝カーソルの入った状態の編集領域)に独自の枠線を加えて描画します。通常はそれでも良いのですが、テキストエリアの枠線を独自にデザインしているページでは、この仕様はちょっと邪魔です。なぜなら、独自デザインの枠線の外側に、ブラウザ側がさらに枠線を加えてしまって、枠が二重に見えてしまうからです。特にテキスト入力欄を角丸にしていると、見た目がおかしくなります。
そんなときには、ブラウザ側が独自の枠線を付加しないようCSSで指定しておけば解決します。

Chromeなどのブラウザが、テキスト入力欄へのフォーカス時に自動で付加する枠線を消すには、outlineプロパティに値noneを指定するだけです。とても簡単です。
以下に、具体的なCSSソースの書き方などを紹介しておきます。

枠が二重になるのは、borderではなくoutlineだから

textarea要素で作るテキストエリアや、input要素で作る1行テキスト入力欄の枠線を自分で装飾するには、主にborderプロパティが使われます。入力フォームに限らず、あらゆる要素の枠線を装飾したい場合にはborderプロパティを使いますよね。角丸にしたい場合は、border-radiusプロパティを使います。
しかし、実は枠線を付加するプロパティは、borderプロパティだけではありません。
outlineプロパティもあります。

ChromeやOperaなどの一部のブラウザが（入力フォームにフォーカスが当たった際に）自動で付加する枠線は、borderプロパティではなくoutlineプロパティに値を加える方法で実現されています。
なので、CSSを使って、フォーカス時にoutlineプロパティの値を消す装飾を加えておけば、ブラウザによる枠線の自動付加を阻止できます。

なお、outlineプロパティで引く枠線の特長や方法については、別途「borderと違ってレイアウトに影響しない枠線が引けるoutlineプロパティ」で紹介していますので、ご参考にどうぞ。

Chromeなどがテキスト入力欄に枠線を加えないようにする書き方いろいろ

ブラウザがテキスト入力欄に枠線を加えないようにするには、CSSで outline: none; を指定すればOKです。
具体的には、以下のようにCSSソースを書くと良いでしょう。
対象条件別に紹介しておきます。

あらゆるフォーカス時に、ブラウザが枠線を加えないようにする書き方

最も簡単なのは、あらゆるフォーカス時に一切枠線を付加しないようにする書き方です。たいていは、このように書いておけば特に問題はないでしょう。

:focus {
	outline: none;
}

上記は、何らかの要素がフォーカスを得た際に装飾する :focus疑似クラスを使っています。要素名を特に指定していないので、あらゆる要素が対象になります。
ここで、outlineプロパティの値をnoneにしているため、フォーカス時にも(outlineによる)枠線は付加されなくなります。

※borderプロパティを使った枠線は、何の影響もなく表示されます。

テキストエリアのフォーカス時にだけ、ブラウザが枠線を加えないようにする書き方

textarea要素で作るテキストエリアにカーソルが入った場合だけを対象にして、ブラウザが勝手に枠線を描画しないようにするには、以下のように書けば良いでしょう。

textarea:focus {
	outline: none;
}

textarea要素に対して :focus疑似クラスを使っています。
簡単ですね。

1行テキスト入力欄のフォーカス時にだけ、ブラウザが枠線を加えないようにする書き方

input要素で作るテキスト入力欄にカーソルが入った場合だけを対象にして、ブラウザが勝手に枠線を描画しないようにするには、以下のように書けば良いでしょう。

input[type=text]:focus {
	outline: none;
}

属性セレクタを使って、input要素のうち、type属性の値が「text」である場合に対して :focus疑似クラスを使っています。
簡単ですね。

Chromeなどがテキスト入力欄に枠線を加えないようにする動作サンプル

表示例は以下の通りです。

• 最初の2つはoutloneプロパティを使っていないので、ChromeやOperaなど一部のブラウザでカーソルを入れると、自動で枠線が付加されます。
  • 1つ目は、元々枠線を装飾していないので、ブラウザが枠線を自動で加えてもおかしくは見えません。
  • 2つ目は、独自デザインとして角丸の枠線を加えてあるため、ブラウザがさらに枠線を加えると枠が二重に見えてしまいます。
• 後の2つは outline: none; を指定してあるため、テキスト入力欄内にカーソルを入れても、余計な枠線は付加されません。

なお、フォーカスが当たっている場合にだけ特別な装飾を施すことは、今どこが入力可能状態なのか？を示す目的には役立ちます。
したがって、上記のようにブラウザが標準で動的に加える枠線を消すのであれば、その代わりに「今ここが入力可能状態ですよ」と示すような別の装飾を加える方が望ましいでしょう。

カーソルや文字が入っている間だけ一時的に入力欄を大きく表示するテキストエリアの作り方については、別の記事で紹介しますのでそちらもご参照下さい。

(更新日：2018年02月03日)