[css] input 태그 자동완성 시 배경 파란색으로 변경되는 이슈 해결

issue

회원가입 기능을 구현하는 중이다.
이메일을 작성하는 input 태그의 배경을 기본값을
가장 위 사진처럼 설정해놨다. (whitesmoke, 아무것도 입력안했을 때)
그냥 입력하면 두번째 사진처럼 원래 배경색으로 나오는데,
자동입력을 하게되면 세번째 사진처럼 배경이 파란색으로 나온다.

issue 원인

• 크롬과 일부 다른 웹 브라우저들은 사용자의 입력 이력을 기반으로 input 필드에 자동완성(Autocomplete)을 제안할 때 :-webkit-autofill 스타일에 !important를 사용하여 적용해두었기 때문에 background-color, background-image, color 등의 스타일링이 어렵다.
• 이렇게 제안된 자동완성 항목을 사용자가 선택하면 input 필드의 배경색이 파란색으로 바뀌는데, 이것은 사용자에게 해당 입력이 자동완성을 통해 채워졌음을 시각적으로 알려주는 방법이다.

issue 해결

• -webkit-은 구글, 사파리 브라우저에 적용된다.
• :autofill은 자동완성 시에 스타일을 적용하는 속성이다.
• !important는 브라우저의 기본 스타일보다 이 스타일이 우선시 되도록 한다.

  input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 500px whitesmoke inset !important;
  }

위처럼 input 태그에 box-shadow 를 설정해주면 자동완성을 하더라도 원래의 색대로 나온다.
기존에 있던 색 위로 덮어씌운것으로 보면 된다.