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

html

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

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

chrome

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

firefox

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

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

chrome2

Firefoxは想定通りの表示。

firefox2

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

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

firefox3

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

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

22 2月 2017

 

コメントを残す

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

CAPTCHA