마지막 게시글을 작성한지 1년도 더 넘어서 이번 글을 작성한다.
플젝이 바빴던것도 있지만...사실 나태했던게 맞다
매일 플젝에서 배웠던걸 정리했어야 했는데...
이제라도 정리를 시작해야겠다.

운영 담당하던 서비스의 결제 페이지에서 오류 건이 올라왔다.
오류 내용은 이름, 전화번호, 이메일 주소 등 input 창에서 자동완성 사용시
화면내의 모든 input 창에 파란색 배경색이 들어간다는 내용이였다.

살펴보니 크롬에서 input 자동완성 사용시 자동으로 배경색이 들어가도록 설정된것이였다.
오늘 포스팅은 해당 색을 제거하는 방법이다.

해결법

아래의 css 속성을 사용하면 해결 가능하다.

input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px transparent inset;
}
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
transition: background-color 5000s ease-in-out 0s;
}

별개로 같이 나타났던 이슈로 해당 input에 있던 배경이미지도 같이 사라지는 현상이 있었는데
input을 div등 다른 태그로 감싸고 해당 태그에 배경이미지를 사용하면 해결된다.