[CSS] input 태그 자동완성 사용시 스타일이 변경되는 이슈

input 태그 자동완성 기능을 사용하면, 기존에 적용한 스타일이 변경됩니다. 이유는 Chrome 내부 스타일시트에는 아래의 에이전트 스타일이 적용되어 있기 때문입니다.

background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;

!important 로 선언이 되어있어 위에서 사용된 코드로는 수정이 불가능하고, 아래의 방법을 이용해서 수정할 수 있습니다.

자동완성 기능 해제

자동완성 기능이 필요하지않다면, 이 방법이 가장 간단하고 좋습니다.

<input type="text" autocomplete="off" />
<!-- OR -->
<form autocomplete="off">
  <input type="text" />
</form>

!important 사용

!important 를 사용하기 때문에, 다른 문제를 야기할 수 있습니다.

input {
    background-color: #fff !important;
    color: #fe4902 !important;
}

비표준 속성 사용

비표준 속성이긴 하나, 자동완성 기능이 필요하다면 이 방법을 사용하는 것이 가장 좋습니다.

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: #fe4902;
  -webkit-box-shadow: 0 0 0px 40rem #fff inset;
}

 

해당 포스팅은 이 글을 참고하여 작성하였습니다.