[CSS] input 자동 완성시 필드 색상 변경
·
🍞 Front-End/HTML+CSS
📌 문제 input 태그의 자동 완성을 선택했을 경우, 필드 색상이 생기는 문제가 발생했다. 이처럼, 크롬, 사파리 브라우저 등에서 input에 자동 완성 기능으로 텍스트를 선택하면 원치 않는 배경색으로 변경되는 경우가 있다. 📌 해결 방법 자동완성 시 스타일링은 CSS로 제어가 가능한데 :autofill을 사용해 제어한다. :autofill hover, active 등과 같이 선택자에 추가하는 의사 클래스로 input 요소의 값이 자동으로 채워질 때 동작 해당 배경색은 -webkit-box-shadow 프로퍼티로 변경할 수 있다. 추가로 자동 완성 기능 시 폰트 색상도 원하지 않는 색상으로 변경되는데 -webkit-text-fill-color 프로퍼티로 변경 가능하다. input:-webkit-auto..