❺フロントの実装

.header__search
  %form
    %input.form__keyword{placeholder: "何かお探しですか？"}
      %label.form__keyword-search
      = link_to '#', class: 'form__keyword-search' do
        = fa_icon 'search', class: 'search-icon'

inputタグで作った入力欄にカーソルを持って行ってクリックすると
デフォルトでは水色のやや太めの枠がつく。
こちらとしてはもうちょっと違うトーンの水色の細い枠をつけたい。

枠に該当する記述に:focus（擬似クラス）をつけてあげて
outline: none;　プロパティーを当ててデフォルトの要素を消して
border-color: #1E90FF ;  などと自分の好きな色を指定する。
ここまでは自分で導き出せたのだが
ずっとクラス名にSCSSを当てる記述をしていて
なんで当たらないんだろ？ってなって

http://plustrick.com/input_focus/
↑この記事を教えていただいた。

上のコードの中ではinputにしか当たらないということがわかった。

input:focus {
border-color: #1E90FF ;
outline: none;
}

としたらすんなり当たってくれた。
プロパティーがなかなか当たらないとなった場合に
自分が間違っているのではないかと思う前に
そのプロパティーが限られたものにしか当たらない可能性もあるという
事も覚えておくといいとアドバイスをいただいた。
ありがたい。

https://itsakura.com/css-gijiclass-click#a2