search

qrac / musubii

Simple CSS Framework for JP
https://musubii.qranoko.jp
150 stars 6 forks source link

Button：フォーカスリングをCSSで設定 #154

Closed qrac closed 5 years ago

qrac commented 5 years ago
screenshot 2019-03-07 12 06 15 screenshot 2019-03-07 12 05 55 screenshot 2019-03-07 12 07 39

角丸付きボタンのフォーカスリングが不自然だったり、Edge・IEのフォーカスが見づらかったりするのでCSSで統一して見やすくする。

qrac commented 5 years ago

box-shadowを用いるのでFloating要素は注意（フォーカスリングのbox-shadowを先に書く）。

qrac commented 5 years ago

image

Bootstrapでは色ごとにフォーカスリングの色も変えてるけど、そこまでやらなくてもいいかなー。

qrac commented 5 years ago

outline は none の後に :focus 書くパターンでIE11対応できる。

qrac commented 5 years ago

v7.0.0 alpha版にて実装完了。