HTML5 날짜 선택기(Date Picker) 스타일 커스터마이징 방법

HTML5의 날짜 선택기(input type="date")는 캘린더 형태의 팝업을 띄워 사용자가 연도와 월을 손쉽게 탐색하며 원하는 날짜를 선택할 수 있게 해줍니다.

날짜 선택기 팝업 꾸미기

이 팝업은 기본 스타일 그대로 두어도 되지만, CSS를 활용하면 배경색이나 글자색 등을 자유롭게 커스터마이징할 수 있습니다. 아래 코드를 실행하면 HTML 날짜 선택기에 다양한 스타일 옵션을 적용해 볼 수 있습니다.

::-webkit-datetime-edit { padding: 4em; }
::-webkit-datetime-edit-fields-wrapper { background: blue; }
::-webkit-datetime-edit-text { padding: 0 0.5em; }

월·일·연도 필드 개별 스타일링

다음 코드는 날짜 선택기를 구성하는 월, 일, 연도 필드와 캘린더 아이콘(피커 인디케이터)을 각각 다른 색상으로 꾸미는 예제입니다.

::-webkit-datetime-edit-month-field { color: white; }
::-webkit-datetime-edit-day-field { color: red; }
::-webkit-datetime-edit-year-field { color: red; }
::-webkit-calendar-picker-indicator { background: gray; }

참고로 위 의사 요소들은 Chrome, Safari, Edge 등 WebKit 및 Blink 엔진 기반 브라우저에서 동작하며, Firefox에서는 일부 지원되지 않을 수 있습니다. 크로스 브라우저 호환성이 중요한 프로젝트라면 이 점을 고려해 디자인을 설계하는 것이 좋습니다.