input type = text 자동완성 디자인

🚧 ISSUE
ISSUE : input 태그에 자동완성이 켜져 있을 경우 배경색 불필요

🛠 ISSUE 해결

자동완성 시 스타일링은 CSS로 제어가 가능한데 :autofill 을 사용해 제어한다.

:autofill
hover, active 등과 같이 선택자에 추가하는 의사 클래스로 input 요소의 값이 자동으로 채워질 때 동작

// css

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

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

// html

✨ 그런데 여기서 주의할 점이 있다. 브라우저별로 기본 사용자 스타일이 적용되어 있는데 이 경우 !important 로 적용되어 있기 때문에 아무리 :autofill 을 이용해 제어하려고 해도 제어가 되지 않는다.

아래는 크롬에 적용되어 있는 기본 에이전트 스타일이다.

background-color: rgb(232, 240, 254) !important;
background-image: none !important;
color: -internal-light-dark(black, white) !important;
코드를 보면 알겠지만 background-color 와 텍스트 color는 제어가 되지 않는다.
이 외에 border 라던지, font-size 라던지는 다 제어가 되지만 저 2가지는 제어가 되지 않는 것이다.

그렇다면 저 2가지를 제어하는 방법은 없을까 ?
(가장 처음 css에 그 답이 나와있다)

font color의 경우 text-fill-color(비표준)를 이용해, background color의 경우 box-shadow와 transition을 이용하는 것이다..!

이 이슈를 찾아보면서 하나같이 다들 배경색이 아니라 box-shadow와 transiton을 사용해서 "배경색을 투명하게 만드는 것과 저 스타일링이 무슨 상관이지.." 싶었는데 바로 브라우저 기본 에이전트 스타일링 때문이었던 것..!

뭔가 별거 아니지만 이유를 알게되서 괜히 기분 좋네 😎😎

참고링크
https://css-tricks.com/snippets/css/change-autocomplete-styles-webkit-browsers/
https://developer.mozilla.org/ko/docs/Web/CSS/Pseudo-classes
https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill
https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-text-fill-color
https://developer.mozilla.org/en-US/docs/Web/CSS/transition