input 클릭시 form 전체 이벤트 효과 :focus-within

 

지난 포스팅에서 input 클릭시 :focus 의사 클래스를 이용해서 색상을 변경 했는데 이번에는

자식요소중 하나라도 focus를 받으면 전체 요소에 이벤트 효과를 줄 수 있는 방법에 대해서 알아보겠습니다.

 

https://moo-you.tistory.com/402

input 클릭시 테두리 색상변경

 

 

:focus-within

포커스를 받았거나, 포커스를 받은 요소를 포함하는 요소를 나타내는 의사 클래스

 

html

<div class="form-area">
  <div class="form-item">
    <label for="inpName">이름</label>
    <input type="text" id="inpName" placeholder="이름을 입력하세요">
  </div>
  <div class="form-item">
    <label for="inpAddress">주소</label>
    <input type="text" id="inpAddress" placeholder="주소를 입력하세요">
  </div>
</div>

다음과 같이 form-area안에 두 개의 input이 존재하고 하나의 input이라도 포커스를 받으면

모든 input박스와 label의 색을 변경하려고 할 때 :focus-within를 사용하면 간단하게 표현 가능합니다.

 

css

.form-area:focus-within input {
    border-color:#0982f0;
    outline: none;
}
.form-area:focus-within label {
  color: #0982f0;
}

 

See the Pen :focus-within by kim oya (@ttuttu) on CodePen.

 

 

:focus-within 브라우저 호환성

Internet Explorer은 아얘 지원을 안하네요