フォームオブジェクトをフォーカスしたときの色について

このエントリーをはてなブックマークに追加

ブログランキング・にほんブログ村へ

ウェブ関連

html

フォームオブジェクトをフォーカスしたときにボーダーなどで色を設定する疑似クラスの:focusだが、chromeとFirefoxでは色が明らかに違った。
始めに書いていたCSSは以下の通り、単純にピンクの線を表示するようにしていただけ。

.contents input:focus,
.contents textarea:focus {
  border: solid 1px #d30085;
}

しかし、これだけではchromeでは以下のように青い線が表示される。

chrome

ちなみにFirefoxでは正常に表示される。

firefox

ちょっと内側に影なんかつけてみたら変わるかもという淡い期待。

.contents input:focus,
.contents textarea:focus {
  border: solid 1px #d30085;
  -moz-box-shadow: 0 0 2px #d30085;
  -webkit-box-shadow: 0 0 2px #d30085;
  box-shadow: inset 0 0 2px #d30085;
}

chromeでは外側の青罫線の内側にbox-shadowで設定したピンクの影が見える。キモイ!

chrome2

Firefoxは想定通りの表示。

firefox2

調べてみるとフォームオブジェクトにはoutline(輪郭)というプロパティが存在していて、chromeではその初期値で青くなっていたよう。
確かにGoogleで検索しようとすると、青い線がでる。
スタイルはborderプロパティと同じようなので:focus時にはborderで色を付けずにoutlineで設定したほうがいいのか!

.contents input:focus,
.contents textarea:focus {
  outline: solid 1px #d30085;
  -moz-box-shadow: 0 0 2px #d30085;
  -webkit-box-shadow: 0 0 2px #d30085;
  box-shadow: inset 0 0 2px #d30085;
}

と思っていると大間違いで、outlineはborderのさらに外側の輪郭になるので、outlineのみの設定だと今度はFirefoxでの表示が以下のようにおかしくなる

firefox3

結局、outlineはnoneで非表示化し、borderを設定するのが一番まともに見えた。

.contents input:focus,
.contents textarea:focus {
  outline: none;
  border:solid 1px #d30085;
  -moz-box-shadow: 0 0 2px #d30085;
  -webkit-box-shadow: 0 0 2px #d30085;
  box-shadow: inset 0 0 2px #d30085;
}

こういう細かい部分でのブラウザ非互換って、結構しんどい。。

22 2月 2017

このエントリーをはてなブックマークに追加

ブログランキング・にほんブログ村へ

ウェブ関連

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です