input 태그를 사용하면 focus 이벤트가 발생했을 때
자동적으로 입력란에 하이라이트가 생긴다.
필자는 제작하는 프로젝트의 분위기에 맞춰 색상 정도는 변경해주려고 하는 편인데
어떻게 하면 이 하이라이트를 없앨 수 있을까?

outline: none

그렇다.
input이 focus되었을 때, outline을 none해주면 된다.
이를 CSS 코드로 표현하면 아래와 같다.

input:focus {
  outline: none;
}

정말 간단하다.

input 태그에 커서가 있음에도 불구하고 하이라이트가 생기지 않았다.

없애는 건 좋았다.
그런데 다른 스타일을 적용하려면 어떻게 해야할까?

다른 스타일 적용하기

이 또한 상당히 간단하다.

input:focus {
  outline: none;
  border: red solid 2px;
}

border 속성을 이용하면 된다.
필자는 속기형으로 작성했지만, 더 구체적으로도 만들 수 있다.

이렇게 원래의 하이라이트가 아닌 다른 색상의 하이라이트를 만들 수도 있다!