업무 하면서 마주친 이슈들, 기억하고 기록하고 정리해보자.
※ 해결방법만 빠르게 보고 싶은 사람은 바로 🛠 ISSUE 해결 부터 확인해주세요 (_ _)
🚧 ISSUE
ISSUE : input 태그에 자동완성이 켜져 있을 경우 배경색 불필요
🛠 ISSUE 해결
자동완성 시 스타일링은 CSS로 제어가 가능한데 :autofill 을 사용해 제어한다.
:autofill
hover, active 등과 같이 선택자에 추가하는 의사 클래스로 input 요소의 값이 자동으로 채워질 때 동작
// css
input:-webkit-autofill,
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
<div class="box">
<label for="name">닉네임</label>
<input type="text" id="name" name="name" placeholder="닉네임을 입력해주세요" spellcheck="false" autocomplete="on">
</div>✨ 그런데 여기서 주의할 점이 있다.
브라우저별로 기본 사용자 스타일이 적용되어 있는데 이 경우 !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
