회사에서 프로젝트를 진행하던 중 고객의 요구사항으로 input을 사용하고 있는 부분의 autofill CSS를 수정해야하는 상황이 생겼다.
autofill과 관련하여 작업한 적이 있었지만 기억이 나질 않아 구글링을 통해서 전에 작업했던 것과 같은 코드를 발견했다.
box-shadow를 통해서 배경색을 흰색으로 변경하여 사용했는데 현재 프로젝트에서는 배경색이 투명이라 적용이 불가능했다.
:autofill로 접근하여 직접 수정하는 방법을 생각해보았으나 autofill의 속성들은 브라우저에서 important로 지정하여 바꾸는 것이 불가능했다.
좀 더 디깅하여 stackoverflow에서 기발한 방법을 찾아냈다.
기존에 투명한 배경색이 적용이 되어있고 autofill 상태일 때 해당 속성대로 배경색이 변하는 것을 transition을 통해 duration을 큰 값을 주어 지연하는 것이다.
stackoverflow에서는 5000s로 지정했지만 duration으로 사용할 수 있는 최대값(2147483647s)을 찾아 지정해주었다.
추가적으로 텍스트 색상은 -webkit-text-fill-color 속성을 통해 지정해주었다.
autofill transition으로 지연하기: https://stackoverflow.com/questions/2781549/removing-input-background-colour-for-chrome-autocomplete
Removing input background colour for Chrome autocomplete?
On a form I'm working on, Chrome is auto-filling the email and password fields. This is fine, however, Chrome changes the background colour to a pale yellow colour. The design I'm working on is us...
stackoverflow.com
transition 시간 최대값: https://stackoverflow.com/questions/37861312/what-is-the-maximum-value-of-a-css-transitions-duration
What is the maximum value of a CSS transition's duration?
What is the maximum value of duration in CSS transition-duration or transition-delay property? I can't find this information. I found only that default value is 0s. I used these documents: https://
stackoverflow.com
코드
See the Pen Autofill by 구태 (@wbnnhjvf-the-lessful) on CodePen.
위와 같이 autofill에 대응하여 배경색과 폰트색을 설정할 수 있었다. autofill외에도 비슷하게 !important로 설정된 스타일에 응용하여 적용해볼 수 있을 것 같다.
'DEV > CSS' 카테고리의 다른 글
| [Styled-Component] style 태그 내 무한 생성되는 클래스 문제 (0) | 2024.08.08 |
|---|---|
| [CSS] 이미지를 원하는 색상으로 필터 씌우기 (0) | 2023.10.18 |