크롬 브라우저에서 input 자동완성 파란색 배경 없애기

1. 문제

webkit기반 브라우저에서 input 자동완성으로 텍스트를 선택하면
아래 스크린샷 처럼 푸른빛의 background-color가 자동으로 적용된다

 

2. 원인

크롬 브라우저에서 input 자동완성 사용 시
아래와 같은 css가 기본 에이전트 스타일로 적용된다.
배경색과 컬러가 !important로 적용되어있다 보니
아무리 배경색을 바꾸고 폰트 컬러를 바꿔도 적용이 되지 않는 것이다

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

 

3. 해결

이럴 땐 -webkit-autofill 속성 이용하여 box-shadow 값을 변경해줘야 된다

  input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
	box-shadow: 0 0 0 1000px white inset;
  }

원치 않는 텍스트 컬러로 변경된다면 동일하게 autofill 속성에 text-fill-color를 이용하면 된다

input:-webkit-autofill:active {
	-webkit-text-fill-color: #000;
    text-fill-color:  #000;
}

 background와 color가 !important 속성으로 이미 컨트롤되고 있기 때문에
아무리 변경해도 소용없으므로,,,,
color는 text-fill-color로, background-color는 box-shadow로 스타일을 새롭게 입혀주는 것이다.

일종의 css trick.. 혹은 야매..🤧
이래서 참 재밌다