【CSS】inputのフォーカス時の青い光を消す

実行環境

これのことです!⬇︎ フォームにもれなくついてくる青いヤツ!消したくても原因はborderでもないしshadowでもないし、一体何者なんだとずっと思っていました!

rails bootstrap input focus css

正体ははoutlineでした!以下の通りに指定すると青い光は消えて、borderをくっきり上書きすることができました。
outlineのリファレンスはこちらです。
http://www.htmq.com/style/outline.shtml

rails bootstrap input focus css

また、事前にbackground-colorを少し暗くしておくことで、フォーカスした時にinputフィールドが明るくなった感じがしますね!

また、上記のデモでは適用していませんが、フォーカス時のplaceholderのcolorを変える場合はこちらです。

この青いヤツから解放された時は、すがすがしい開放感に浸れました!
以上です。ご覧いただき、ありがとうございました😁


投稿者:

Shuji Tenra

「仕事に特化したQ&AサイトJobQuery【ジョブクエリ】」の開発/運営をしています。https://jobquery.jp