크롬에서 input, textarea, button에 생기는 파란색 테두리 없애는 방법

웹디자인을 하다보면 input이나 textarea등의 Form요소에 포커싱이 될때 원치않는 파란색 테두리가 쳐지는 것을 볼 수 있습니다. 이런 현상은 크롬브라우저에서 발생을 하는데 원인과 해결방법을 포스팅하려고 합니다.

원인

IE에서는 이런현상이 없는데 크롬브라우저에는 발생하는 현상입니다. 오류라기 보다는 접근성에 대한 정책으로 보면 될것 같습니다.
input이나 textarea에 포커싱이 될 경우 포커싱이 되었다는 것을 표시하기 위해 outline 요소가 작동하는 것입니다.

해결방법

outline은 border와 흡사한 방식으로 css로 핸들링을 할 수 있습니다.
그래서 그냥 focus되는 영역의 outline의 두께를 0으로 만들면 됩니다.
주로 input이나 textarea, button 요소에 생기기 때문에 해당 요소의 focus를 0으로 처리하면 됩니다.

textarea:focus {
  outline: none;
}
button:focus {
  outline: none;
}
input:focus {
  outline: none;
}

유의 사항

outline요소는 border요소와 흡사한데… border의 경우 두께에 따라 넓이나 높이에 영향을 미치는 반면 outline는 두께에 상관없이 넓이나 높이에 영향을 미치지 않습니다.

예를들어 전체 1280px의 넓이 중..
sidebar 영역의 넒이가 280px
본문영역의 넓이가 1000px
테두리(border) 의 두께가 1px이라면..

전체 넓이 1280px에 테두리 두께를 더해서 총 넓이는 1284px가 됩니다.
하지만 outline으로 테두리를 표시한다면 그냥 1280px이 됩니다. outline은 그냥 레이아웃 위에 레이어로 위치한다고 보면 됩니다.

그렇다고 레이아웃 계산이 쉽다고 outline을 border대신 사용하지는 않습니다.
outline은 그냥 참고로 볼 때만 주로 사용되기 때문입니다.