크롬 input 테두리 제거하기

input태그인 검색기능에서 활성화시 테두리가 뜬다.

 

모든 테두리 제거방법

이렇게 크롬에서 테두리가 뜨는데 간단하게 CSS설정만으로 테두리를 제거해줄 수 있다.

*,*:focus,*:hover{outline:none;}

이렇게 outline값을 none로 설정하게되면 테두리가 제거된다.

 

왜 이렇게 테두리가 뜨나요?

크롬이 80버전에 들어가면서 outline이 설정되는것이 크롬브라우저의 기본 style(css)로 설정되어있습니다.
따라서 최신 크롬 버전을 사용하시는 경우 버튼(button), 입력(input) 태그 등에서 활성화시 테두리가 표시됩니다.

 

위 사진은 티스토리 설정에서 해당 코드를 입력한 모습

 

설정후 활성화가 되었음에도 테두리는 표시되지 않습니다.