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

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

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

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

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

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


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

  1. input:focus {
  2.     outline: none;
  3. }
  4. textarea:focus {
  5.     outline: none;
  6. }
* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
초이 프로필
WrapUp 블로거

초이

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^