実行環境
|
1 2 3 |
ruby 2.5.1 rails 5.1.6 bootstrap-sass 3.3.7 |
これのことです!⬇︎ フォームにもれなくついてくる青いヤツ！消したくても原因はborderでもないしshadowでもないし、一体何者なんだとずっと思っていました！
正体ははoutlineでした！以下の通りに指定すると青い光は消えて、borderをくっきり上書きすることができました。
outlineのリファレンスはこちらです。
http://www.htmq.com/style/outline.shtml
|
1 2 3 4 5 6 |
textarea:focus, input:focus, input[type]:focus, .uneditable-input:focus { outline: 0; box-shadow: none; border: 2px solid #FF9800; background-color: #ffffff; } |
また、事前にbackground-colorを少し暗くしておくことで、フォーカスした時にinputフィールドが明るくなった感じがしますね！
また、上記のデモでは適用していませんが、フォーカス時のplaceholderのcolorを変える場合はこちらです。
|
1 2 3 |
input:focus::placeholder { color: #c5c5c5; } |
この青いヤツから解放された時は、すがすがしい開放感に浸れました！
以上です。ご覧いただき、ありがとうございました😁
