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

178

01 сентября 2018, 18:20

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

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

К сожалению без скриптов не получится...

Если бы разметка была вот такая, то получится:

.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; 
} 
 
 
 
.search__dropdown { 
  background: red; 
  display: none; 
  height: 50px; 
  width: 200px; 
} 
 
.search__input:focus + .search__dropdown { 
  display: block; 
}

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

суть в том, что в CSS нельзя подняться на уровень выше во вложенных блоках чтобы применить стиль к элементу .search__dropdown

А вот если input и .search__dropdown будут на одном уровне, можно применить селектор отношения +, который говорит о том, что стили нужно применить к элементу, находящемуся непосредственно ПОД заданным элементом.

Хотя и этот способ не является кросбраузерным, т.к. + это CSS3