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

 

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

[HTML/CSS] input 배경색, 글자색 변경하기

[HTML/CSS] input 커서 색상 변경하기 (caret-color)

[HTML/CSS] input 커서 없애기

[HTML/CSS] input 테두리 아래만 남기기, 없애기 (border, outline)

 

 

이번에는 

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

 

 

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

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

• border-color
• outline

 

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

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

[HTML/CSS] input 테두리 아래만 남기기, 없애기 (border, outline)

 

 

  예제  

<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 필드에 마우스를 클릭하면

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