[CSS]input要素にfocusしたときに外側の要素のスタイルを変化させたい

Question

デスクトップアプリを書いており、formの細かい指定で困っています。
実現したいことは、アプリ内の検索フォームに入力する際に、フォームの外側のborderの色を変化させたいです。
現物としては、twitterのSearch twitterのような感じを目指しています。

通常時:

入力時:

トライしたアプローチとしては、外枠となるdivの中にそれにラベリングしたinput要素を作り、cssでイベントに対応したborderの設定を書くということをしました。

        <div id="search-box">
          <div class="search-icon">
            <アイコンのsvg>
          </div>

          <form method="post" action="#">
            <label for="search-box">
              <input type="search" placeholder="Search">
            </label>
          </form>
        </div>

#search-box {
  display: flex;
  background-color: #aaa;
  align-items: center;
  border-radius: 15px;
  margin-right: 50px;
  width: 250px;
  height: 30px;
}

.search-icon svg{
  (略)
}

#search-box input {
  border: 0;
  width: 100px;
  background-color: #aaa;
  margin-top: 3.5px;
  outline: none;
}


#search-box :focus {
  border: 1px solid #000 ;

できたもの:

入力時:

label付けし、focusイベントに対しる外側のcssの変更を書けばいいのだろうと考えて、こうしたコードを書いたのですが、期待に反してinput要素のborderの変更だけ反映されてしまいました。

Q1. イベントの発生源とは別の要素のスタイルを正しく記述するにはどうすればよいでしょうか？

Q2. labelは一対一対応しかできないですが、アイコンの色も変更したいというように、イベントに対して複数要素のスタイルを変更する方法はありますでしょうか？

素人質問で恐縮ですが、宜しくお願い致します。

Answer 1

IE未対応ですがfocus-withinという疑似クラスがあります。
https://developer.mozilla.org/ja/docs/Web/CSS/:focus-within

これをsearch-boxに適用させればご希望のスタイルが実現できるかと思います。
search-box:focus-within <子要素> で指定すればQ2も多分実現できると思います。

Comments

[退会済みユーザー]

回答ありがとうございます。疑似クラスの勉強をするいい機会になりました。
Q2についてですが、input要素がアイコンの子要素になっていないと実装できないと思い、色々書いてみましたがうまくいかなかったので、結局javascriptで対応することにしました。focusinとfocusoutに対してEventListenerを書けばとりあえずやりたいことは実装できました。