회사에서 업무를 하면서, input 자동완성 기능에서 파악하게 된 이슈이다.
이슈
input 태그에 자동완성이 켜져 있을 시, 배경색이 원하지 않게 변경됨
이슈 해결
:autofill을 사용해서 제어
hover나 active와 비슷하게 선택자에 연결해서 쓰인다.
input 요소의 값이 자동으로 채워지는 동작을 설정해주는 것이다.
// css
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-text-fill-color: #000;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
box-shadow: 0 0 0px 1000px #fff inset;
transition: background-color 5000s ease-in-out 0s;
}
input:autofill,
input:autofill:hover,
input:autofill:focus,
input:autofill:active {
-webkit-text-fill-color: #000;
-webkit-box-shadow: 0 0 0px 1000px #fff inset;
box-shadow: 0 0 0px 1000px #fff inset;
transition: background-color 5000s ease-in-out 0s;
}
주의 - 브라우저 별로 좀 다르다.
Chrome, Safari
User Agent Style에서는 !import 처리가 되어 있어서, 저렇게 설정을 해줘도 같은 이슈가 발생한다.
// Chrome User Agent Style
background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;bgcolor와 color는 !import 처리가 되어 있어서 위의 코드로는 제어가 되지 않아 같은 이슈가 발생되는 것을 확인할 수 있다.
color(font)의 경우
text-fill-color(비표준)을 이용
background-color의 경우
box-shadow와 transition을 사용한다.
즉, 사용방법은
input:-webkit-autofill {
// 배경색의 경우
-webkit-box-shadow: 0 0 0 1000px #000 inset;
// 폰트색의 경우
-webkit-text-fill-color: black;
}