input 클릭시 테두리 색상변경

 

input 클릭시

아래와 같이 테두리 색상변경하는 방법입니다.

 

html

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

 

 

input을 클릭했을때 효과를 주기 위해서는 포커스를 받은 요소를 표현하는 :focus 의사클래스를 사용해서 표현할 수 있습니다.

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

:fuocus는 포커스를 받은 요소 자체에만 해당하기 때문에 자식 영역이 포커스를 받은 경우에는 :focus-within을 사용합니다.

 

See the Pen Untitled by kim oya (@ttuttu) on CodePen.

 

 

 

:fuocus 브라우저 호환성