포커스가있는 입력 컨테이너에 CSS 적용

Question

입력란과 버튼이있는 div가 있습니다. 사용자가 입력에 집중할 때까지 버튼을 숨기고 싶습니다.

필자는 div에있는 : focus 가상 클래스를 사용하려고 시도했지만 입력에 초점을 맞추어 상속 될 것이라고 생각했지만 작동하지 않았습니다. 여기

내 HTML

<div class="search"> 
    <input type="text" placeholder="Search..." /> 
    <button type="submit">Search</button> 
</div> 

입니다 그리고 여기에 이미

.search button { 
    display: none; 
} 

.search:focus button { 
    display: block; 
} 

는 자바 스크립트없이이 작업을 수행하는 것이 가능

을 시도 한 CSS는 무엇입니까?

Answer 1

이 경우 adjacent sibling combinator, +을 사용할 수 있습니다. 초점이 제거되면

.search input:focus + button { 
    display: block; 
} 

Example Here

는 FelipeAls points out으로하지만, 당신은 버튼을 클릭 할 수 없습니다. 그러므로 당신은 또한이 같은 뭔가를 할 수 :

이

Example Here

.search button:hover, 
.search button:focus { 
    display:block; 
}