[CSS] Input 태그 하이라이트 없애기

웹페이지에서 인풋 태그(input)를 사용 하다보면 사용자가 현재 어떤 input 태그에 데이터를 입력 하고 있는지 표시해주기 위해서 활성화된 input 태그를 강조해주는 하이라이트가 생기게 됩니다. 크롬에서는 보통 하늘색 네모난 박스료 표시해주네요.

그런데 웹페이지를 디자인할 때 이 하이라이트가 강조되어 페이지의 디자인과는 잘 맞지 않는 경우가 있어, 이 하이라이트를 CSS 를 이용해 지워보도록 합시다.

outline을 none 으로 설정하기

CSS 를 이용하여 하이라이트를 제거하는 방법은 아주 간단합니다. 아래 예제를 보시죠.

input:focus { outline: none; }

아주 쉽죠? 포커스된 input 태그(input:focus)의 outline 을 none 으로 설정 해주는 것입니다. 위 코드는 모든 input 태그의 하이라이트가 제거되지만, id 혹은 class 를 사용하여 특정 input 태그만 선택하는 것 역시 가능 합니다.

#s-box:foucs { outline: none; }
.box:focus { outline: none; }

끝.