[CSS-이슈] input 자동 완성 기능 사용 시 스타일 변경

회사에서 업무를 하면서, 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;
}