크롬 비밀번호 파란색

😥 왜 background-color가 적용되는가?

크롬은 자동완성된 필드에 특별한 스타일(-internal-autofill-selected)을 적용하면서, 보안 이슈 때문에 이 스타일을 덮어쓰는 걸 제한합니다. 그래서 아래와 같은 문제가 생깁니다:

• background-color: transparent !important; 해도 크롬이 무시함
• box-shadow 등으로만 일부 스타일을 덮어쓸 수 있음

---

✅ 해결 방법 (우회 방식)

방법 1: box-shadow로 배경 덮기

css

복사편집

input:-webkit-autofill { box-shadow: 0 0 0 1000px transparent inset !important; -webkit-text-fill-color: #000 !important; }

이렇게 하면 자동완성된 배경을 덮어버릴 수 있어요. 1000px처럼 충분히 큰 inset 값을 주면 완전히 덮이게 됩니다.

---

방법 2: transition을 이용한 꼼수

css

복사편집

input:-webkit-autofill { transition: background-color 5000s ease-in-out 0s; }

이건 배경색 전환을 늦춰서 사용자 눈에 안 띄게 하는 꼼수지만, 크롬 최신 버전에선 잘 안 먹힐 수 있어요.

---

방법 3: 자동완성 자체 비활성화 (선택적)

html

복사편집

<input type="text" autocomplete="off" />

다만 사용자 편의성이 떨어질 수 있어서 조심해서 써야 해요.

---

🔍 정리

• background-color는 브라우저가 강제로 넣는 스타일이라 !important 써도 잘 안 바뀜
• box-shadow가 사실상 가장 확실한 우회 방법
• -internal-autofill-selected는 크롬 내부 전용 셀렉터라 우리가 직접적으로 조절하기 힘듦