にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

テキスト入力欄のフォーカス時にChromeなどが自動付加する枠線を消す方法 [フォーム,]

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

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ソースを書くと良いでしょう。
対象条件別に紹介しておきます。

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

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

CSSソース

:focus {
	outline: none;
}

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

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

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

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

CSSソース

textarea:focus {
	outline: none;
}

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

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

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

CSSソース

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

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

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

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

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

■何も装飾していないテキストエリアと、borderプロパティで枠線を加えたテキストエリア:

■上記に対して、ChromeやOperaなどの一部のブラウザがフォーカス時に枠線を付加しないようにしたテキストエリア:

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

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

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---