Как сделать такое с псевдоклассом focus?

Question

[lemonlimelike]

Есть вот такой div блок:

<div class="uk-navbar-right">
                    <div class="search">
                          <input class="search__input" type="text"  placeholder="Поиск...">
                    </div>
                    <div class="search__dropdown">
             </div>

На эти элементы действую такие css классы:

.search{
  height: 42px;
}
.search__input{
    height: 100%;
    padding: 0 42px 0 15px;
    border: none;
    outline: none;
    background: transparent;
    transition: .4s cubic-bezier(0, 0.8, 0, 1);
    width: 300px;
    border-bottom: 2px solid #e9e9e9;
    transition: 0.3s all;
    cursor: pointer;
}
.search__input::-webkit-input-placeholder{
    color: #1e87f0;
}
.search__input::-moz-placeholder{
    color: #1e87f0;
}
.search__input:focus {
    color: #1e87f0;
    cursor: text;
    border-bottom: 2px solid #1e87f0;
}

Как сделать так, когда кликаешь на Input, и чтоб div.search__dropdown добавлялось свойство disply: block, а когда убирать фокус то display:none

Answer 1

[Андрей Саврасов]

На чистом CSS никак

На js можно путём добавления класса к родительскому элементу при focusIn и его удалению при focusOut
Далее в css прописываешь, отображение в обёртке добавленного класса.

Answer 2

[NaN]

можно, если бы у инпута не было обертки