[CSS]크롬 input 태그등에 자동생성 백그라운드 색 제거하는 방법

크롬 input 태그등에 자동생성 백그라운드 색 제거하는 방법

크롬 브라우저를 사용하여 input 태그등을 사용하면 나중에 페이지를 로딩할 경우 배경색이 다른 경우가 발생한다. 이런 경우는 로그인 페이지를 만들거나 기타 입력폼을 작성할 때 나타나는데 문제는 input 폼이 다수인 경우 모두 바뀌는 것이 아니라 일부만 바뀌어 이상해 보이기 때문이다.

자동완성기능 속성을 off해도 백그라운드가 노란색으로 나타나는 이 스타일을 제거하기 위한 방법은 어떻게 해야하는가? background 속성을 변경해도 적용이 안되는데 그 이유는 해당 백그라운드 칼라는 box-shadow 속성과 관련이 있기 때문이다. 이를 제거하기 위해 아래의 방법을 사용해야 한다.

# input 입력폼의 자동완성 백그라운드 제거 방법

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

구글링을 통해 확인된 방법은 위와 같이 box-shadow 색상을 다른 것으로 변경하면 가능하다. 위 소스코드의 경우 input-webkit-autofill 선택자를 사용하였으나 일반적으로 사용하는 input { ... } 태그 안에 사용하여도 효과는 동일하였다.