[CSS] input 자동완성 시 적용되는 기본 스타일 초기화하기

아이디나 비밀번호를 구글과 같은 사이트에 저장 한 뒤
저장된 정보를 input 입력창에 불러오면
input의 배경 색상이 자동으로 지정되어 나타나는 경우가 있다.

 

이는 :autofill이라는 가상 클래스에 스타일이 선언되어 있기 때문인데

디자인을 원하는 대로 커스텀하고 싶으면 

브라우저 호환성을 고려해 :autofill과 :-webkit-autofill(크롬의 경우) 가상 선택자를 써서

원하는 대로 스타일을 재선언해줘야 한다.

 

문제는 크롬 같은 경우는 !important로 요소들에 대한 스타일이 선언되어 있어서

다른 방식으로 스타일을 입혀줘야 한다는 것이다.

input:autofilll {
	color: -internal-light-dark(black, white) !important;
	background-color: rgb(232 240 254) !important;
	background-image: none !important
}

크롬에 important로 선언된 스타일

 

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:autofill,
input:autofill:hover,
input:autofill:active,
input:autofill:focus, {
  -webkit-text-fill-color: black; // 글자색 변경
  -webkit-box-shadow: 0 0 0 1000px white inset !important; // 배경색 변경
  box-shadow: 0 0 0px 1000px white inset; // 배경색 변경
}

크롬에 스타일 덮어쓰기

 

 

 

참고

https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill

https://css-tricks.com/almanac/pseudo-selectors/a/autofill/