Почему фокус не работает на вводе, когда мы помещаем значок поиска на ввод? ⇐ CSS

[Гость]

это мой HTML-код:

.search-bar{ ширина: 40 пикселей; высота: 45 пикселей; переход: 0,7 с; } .search-icon { верх: 0,4%; правильно: 5%; ширина: 35 пикселей; поле слева: 300 пикселей; курсор: указатель; размер коробки: граница-коробка; } .поиск-бар:фокус{ курсор: указатель; ширина: 200 пикселей; контур: нет; } .search-btn{ цвет фона: прозрачный; контур: нет; граница: нет; позиция: абсолютная; верх: 0,4%; правильно: -10%; ширина: 35 пикселей; высота: 35 пикселей; поле слева: 300 пикселей; курсор: указатель; } .search-icon:focus ~ .search-bar{ ширина границы: 0 пикселей; ширина: 200 пикселей;



Обычно это панель поиска, ширина которой, когда я нажимаю на поле ввода или кнопку, увеличивается до 200 пикселей.
Проблема в том, что у меня есть значок поиска на этом входе, и когда я нажимаю на значок поиска, ширина не увеличивается.