Скрыть кнопку на фокусе окна поиска

Question

Я пытаюсь скрыть кнопки, сосредоточившись на окне поиска и показывая его при фокусировке.

<div class="top-bar"> 
    <div class="search-container"> 
     <button >MyButton</button> 
     <button >MyButton2</button> 
     <button >MyButton3</button> 

     <input class="search" type="search" placeholder="Search"> 
    </div> 
</div> 

Css

.top-bar { 
    height: 35px; 
    width: 100%; 
    padding-top: 5px; 
    background-color: #f5f5f5; 
} 
.search-container { 
    max-width: 950px; 
    margin: auto; 
    padding-right: 10px; 
} 
.search { 
    border-radius: 5px; 
    border: 1px solid #ccc; 
    padding: 5px; 
    width: 75px; 
    -webkit-transition: all .5s ease; 
    -moz-transition: all .5s ease; 
    transition: all .5s ease; 
    float: right; 
} 
.search:focus { 
    width: 200px; 
} 

Working Fiddle

Но это не работает fine.Any идеи ???

Answer 1

Там нет предыдущего селектор в CSS. Если вам нужен желаемый эффект, ваши кнопки должны появиться после вашего поля поиска в вашей разметке HTML.

Затем вы можете использовать general sibling selector (~).

.top-bar { 
 
    height: 35px; 
 
    width: 100%; 
 
    padding-top: 5px; 
 
    background-color: #f5f5f5; 
 
} 
 
.search-container { 
 
    max-width: 950px; 
 
    margin: auto; 
 
    padding-right: 10px; 
 
} 
 
.search { 
 
    border-radius: 5px; 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
    width: 75px; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    float: right; 
 
} 
 
.search:focus { 
 
    width: 200px; 
 
} 
 
.search:focus ~ button { 
 
    display:none; 
 
}

<div class="top-bar"> 
 
    <div class="search-container"> 
 
     <input class="search" type="search" placeholder="Search"> 
 
     <button >MyButton</button> 
 
     <button >MyButton2</button> 
 
     <button >MyButton3</button> 
 
    </div> 
 
</div>

Answer 2

Вам нужно будет изменить ваш HTML структурировать только немного, перемещая input поле перед вашими button' с, а затем добавьте в ваш CSS:

.search:focus ~ button { 
    display: none; 
} 

В приведенном выше CSS, я использовал general sibling selector, т.е. ~, который separates two selectors and matches the second element only if it is preceded by the first, and both share a common parent.

jsFiddle demo.

.top-bar { 
 
    height: 35px; 
 
    width: 100%; 
 
    padding-top: 5px; 
 
    background-color: #f5f5f5; 
 
} 
 
.search-container { 
 
    max-width: 950px; 
 
    margin: auto; 
 
    padding-right: 10px; 
 
} 
 
.search { 
 
    border-radius: 5px; 
 
    border: 1px solid #ccc; 
 
    padding: 5px; 
 
    width: 75px; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
    float: right; 
 
} 
 
.search:focus { 
 
    width: 200px; 
 
} 
 
.search:focus ~ button { 
 
    display: none; 
 
}

<div class="top-bar"> 
 
    <div class="search-container"> 
 
    <input class="search" type="search" placeholder="Search"> 
 
    <button>MyButton</button> 
 
    <button>MyButton2</button> 
 
    <button>MyButton3</button> 
 
    </div> 
 
</div>

Answer 3

В HTML, поместите входной тег над кнопками.

И добавьте следующий код в CSS:

.search:focus ~ button { 
    display:none; 
}