[HTML/CSS] input 클릭 시 테두리 색상 변경

IT/HTML&CSS

hi.anna 2023. 7. 31. 06:39

input 필드에 대한 스타일을 변경하는 방법을 알아보고 있습니다.

이번에는

input 필드를 클릭했을 때 테두리의 색상을 변경하는 방법을 알아보도록 하겠습니다.

input 클릭 시, 테두리 색상 변경

필드 클릭 시, 테두리 색상을 변경하기 위해서, 다음의 두 속성을 이용할 수 있습니다.

이 두 속성의 지난번 포스팅에서

input 필드의 테두리를 없앨 때도 사용했습니다.

예제

<input type='text' 
       placeholder='no border' 
       class='blue-border'/>

.blue-border:focus {
  border-color: blue;
  outline: none;
}

input 필드에 focus가 이동했을 때,

border-color 속성을 이용하여 테두리 색상을 지정하였습니다.

그리고, border-color를 outline이 덮지 않도록, outline을 숨김처리 하였습니다.

input 필드에 마우스를 클릭하면

테두리 색깔이 변경되는 것을 확인 할 수 있습니다.