[CSS] 크롬에서 input 자동완성 백그라운드 색 제거

크롬 브라우저 나 모바일 webkit기반 브라우저 에서는 자동 완성값이 저장된 input박스의 배경색을 파란색으로 보여주는 기능이 있다.

이는 background 속성을 변경해도 적용되지 않는데 그 이유는 해당 백그라운드는 box-shadow속성과 관련이 있기 때문이다.

따라서 이를 제거하기 위해서는 아래의 방법을 사용해야한다.

input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px white inset;
	box-shadow: 0 0 0 1000px white inset;
}

-webkit-box-shadow 속성만 지정하면 호환성을 위해
box-shadow 속성을 같이 지정하라는 경고 메세지가 나온다.