크롬에서 input, textarea 클릭 포커싱 시 생기는 파란색 테두리 없애는 방법

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

개발을 하다보면 input이나 textarea에 클릭하여 focus하면 파란색 테두리가 생겨 보기 싫은 디자인 구성이 되는 경우가 발생합니다.

원인은 크롬브라우저에서 발생 하는데, 접근성에 대한 크롬의 정책으로 보면 될 것 같습니다.

input 이나 textarea에 포커싱을 하게 되면 outline 이 입혀져 파란색 테두리가 보입니다.

이것을 없애는 방법으로는 css 디자인으로 핸들링하여 없애줄 수 있습니다.

css에서 outline: none; 속성을 적용하여 input, textarea, button 등 파란색 테두리를 없앨 수 있습니다.

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