크롬 자동입력 필드 스타일 오버라이드 방법

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

웹 개발자 (중급 이상)

핵심 요약

• 크롬 자동입력 필드의 기본 노란 배경을 제거하기 위해 input, textarea, select 요소에 맞춤 CSS 적용
• :autofill 의사 선택자를 사용해 입력 필드 스타일 오버라이드
• 모든 상태(hover, focus)에서 일관된 디자인 적용 가능

섹션별 세부 요약

1. 문제 개요

• 크롬의 자동입력 기능이 기본으로 노란 배경 제공
• 사용자 정의 디자인과 충돌 가능성 있음
• textarea 및 select 요소에도 동일한 스타일 적용

2. 해결 방안

• CSS :autofill 의사 선택자 사용

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: transparent !important;
  color: inherit !important;
}

• !important 사용으로 브라우저 기본 스타일 우회
• 모든 상태(호버, 포커스)에 동일한 스타일 적용

3. 적용 범위

• HTML5 입력 요소 전반에 적용 가능
• 모바일 및 데스크톱 크롬에서 동작 확인
• 다른 브라우저(예: Firefox, Safari)에서는 동작하지 않음

결론

• :-webkit-autofill 의사 선택자와 !important 사용으로 크롬 자동입력 필드 스타일 제어
• 모든 입력 요소에 일관된 디자인 적용 시 사용 권장
• 브라우저 호환성 검증 필수 (크롬 기반 브라우저 제외 시 동작 불확실)