KonifarPod

CSSでinputフォーカス時の影やborderを消す

   

Pocket

CSSでinput要素の影やborderを消したり、新しい装飾をつけたりするやり方がわからずちょっと時間をかけてしまったので備忘として記載しておきます。CSSに慣れてる人だったら簡単なんでしょうけどね。。。

[Original]

Border2

[Custom]

Border1

このようにするには、borderやbox-shadowをいくら書いてもダメです!必要なのはoutlineプロパティです!

input[type="text"]:focus {
  outline: 0;
  border-color: orange;
}

outlineとは、アウトラインのスタイル・太さ・色を指定するプロパティです。borderと何が違うの?ってところなんですが、outlineはborderのすぐ外側に描画されるみたいです。で、inputのデフォルトCSSにはoutlineが設定されているため、いくらborderを上書きしようとしても意味がないというわけです。

なので、inputのカスタマイズをする時はまずoutline: 0;にしてから自分の好きなCSSで装飾するといいと思います。(Bootstrapを見てもそんな感じでやってました)

Pocket

 - 未分類