[CSS] input 자동 완성시 필드 색상 변경

📌 문제

input 태그의 자동 완성을 선택했을 경우, 필드 색상이 생기는 문제가 발생했다. 이처럼, 크롬, 사파리 브라우저 등에서 input에 자동 완성 기능으로 텍스트를 선택하면 원치 않는 배경색으로 변경되는 경우가 있다.

 

📌 해결 방법

자동완성 시 스타일링은 CSS로 제어가 가능한데 :autofill을 사용해 제어한다.

:autofill hover, active 등과 같이 선택자에 추가하는 의사 클래스로 input 요소의 값이 자동으로 채워질 때 동작

 

해당 배경색은 -webkit-box-shadow 프로퍼티로 변경할 수 있다. 추가로 자동 완성 기능 시 폰트 색상도 원하지 않는 색상으로 변경되는데 -webkit-text-fill-color 프로퍼티로 변경 가능하다.

input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 1000px #181924 inset; // 배경색 변경
   -webkit-text-fill-color: white // 글자색 변경
}

 

자동 완성해도 스타일이 변경되지 않는다!