[CSS] 자동 완성 시 input 배경색 변경

 

webkit 기반 브라우저에서 자동완성 기능을 사용할 때 배경색이 바뀐다.

이를 해결하기 위해선 :autofill 의사 클래스를 사용하면 된다.

 

🤔 :autofill 

---

<input> 요소의 value가 브라우저에 의해 자동으로 채워질 때 동작한다.

사용자가 입력하면 동작하지 않는다.

 

❗NOTE

---

많은 브라우저의 user agent style sheets(각 브라우저 마다 CSS 기본 규칙)는 :-webkit-autofill 스타일 선언에서 !important를 사용한다.

ex) 크롬의 내부 스타일 시트

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

즉 우리는 :autofill에서  background-color, background-image, color를 재정의할 수 없다.

 

 

✨ 해결법

---

 

 

color의 경우 text-fill-color (비표준),

background-color의 경우 box-shadow와 transition을 이용한다. 

 

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: 글자색;
  -webkit-box-shadow: 0 0 0px 1000px 배경색 inset;
  transition: background-color 5000s ease-in-out 0s;
}

 

 

 

---

 

 

 

:autofill - CSS: Cascading Style Sheets | MDN