【CSS】tips inputにフォーカスしたときborderの色を変える

どうもてぃ。

CSS力向上を願ってtips記事を書いていきたいと思います。

TL;DR

input:focus-visible {
  outline: 1px solid #ddd;
}

// もしくは
input:focus {
  outline: 1px solid #ddd;
}

inputを装飾している場合…

focus時にoutlineで強調すると、inputにborder-radiusを使っていた場合outlineがradius化してくれず若干違和感を感じる挙動になります。

そんなときは outline: none;にしてbox-shadowで装飾しましょう。

See the Pen by motty (@motty93) on CodePen.

以上。