CSS로 자동완성 입력 필드의 노란 배경색 제거하는 방법

일부 브라우저에서는 웹사이트의 입력 필드를 자동완성으로 채울 때 보기 좋지 않은 노란색 배경이 강제로 적용되곤 합니다. 왜 브라우저가 이런 동작을 하는지는 명확히 밝혀져 있지 않지만, 다행히 이 불편한 배경색은 몇 줄의 CSS로 손쉽게 제거할 수 있습니다.

노란 배경색, 왜 문제가 될까?

사이트의 색상 팔레트가 우연히도 연한 노란색과 잘 어울린다면 큰 문제가 아닐 수 있습니다. 하지만 대부분의 경우 브라우저가 임의로 넣어주는 이 노란 배경은 정교하게 설계된 UI와 어울리지 않으며, 디자인의 완성도를 떨어뜨리는 요인이 됩니다.

Webkit 기반 브라우저에서만 발생하는 현상

참고로 이 문제는 Chrome, Safari 등 Webkit(Blink 포함) 엔진을 사용하는 브라우저에서 나타납니다. 반면 Firefox는 자동완성 시 흰색 배경을 사용하기 때문에 이런 현상이 발생하지 않습니다.

CSS로 배경색 덮어쓰기

Chrome은 자동완성 상태의 입력 필드에 일반적인 background-color 속성이 적용되지 않도록 막아두었기 때문에, 대신 내부 그림자(box-shadow)를 활용해 기존 배경 위에 원하는 색을 덮어씌우는 트릭을 사용합니다.

input:-webkit-autofill {
  -webkit-box-shadow: inset 0 0 0px 9999px white;
}

위 코드는 9999px 크기의 흰색 내부 그림자를 만들어 노란 배경을 완전히 가립니다. white 부분을 원하는 색상 코드로 바꾸면 브랜드 컬러에 맞게 자유롭게 조정할 수 있습니다.

마무리

몇 줄의 CSS만으로 자동완성 필드의 거슬리는 노란 배경을 깔끔하게 정리했습니다. 이제 폼 디자인이 한층 더 일관성 있고 완성도 높게 보일 것입니다.