[CSS] 자동완성 / user agent stylesheet

브라우저마다 기본으로 적용되는 css가 있다.
그 중 user agent stylesheet라는게 있는데
이번엔 input에 자동완성 기능? 이 들어가면서 알게되었다.
상황은 이렇다.
 
페이지를 만들다가 로그인하는 화면이었다
로그인 할때 아이디입력 란에 입력을 하게되면 이전에 입력되었던 아이디 리스트가 뜬다.
이것을 이용해 아이디를 입력하게 되면 그 스타일이 나온다
 
css 문법도 눈에 익지 않은 것이였지만
해결방법은 역시나 있었다
 

/* Change the color to your own background color */
 input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus,
    input:-webkit-autofill:active {
	 transition: background-color 5000s ease-in-out 0s;
	 -webkit-transition: background-color 9999s ease-out;
     -webkit-box-shadow: 0 0 0px 1000px white inset !important;
     -webkit-text-fill-color: #fff !important;
   }

애초에 important로 background가 먹혀있어서
기존의 background-color 로 덮어쓰기가 불가능하다
 
그래서 transition과 box-shadow로 덮어 씌워서 변경하는 방식으로 해결해야 했다.
text-fill-color 는 비표준 방식이라고 하니 참고해두자