input 자동완성 배경색 변경하기

크롬, 사파리 브라우저 등에서 input 에 자동 완성 기능으로 텍스트를 선택하면 원치 않는 배경색으로 변경되는 경우가 있다.

해당 배경색은 -webkit-box-shadow 프로퍼티로 변경할 수 있다.

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

* input의 배경색처럼 보이지만 box-shadow로 변경해야 한다.

 

추가로 자동 완성 기능 시 폰트 색상도 원하지 않는 색상으로 변경되는데 -text-fill-color 프로퍼티로 변경 가능하다.

-webkit-text-fill-color