HTML5 날짜 필드와 placeholder 속성의 호환성 문제
HTML5의 <input type="date"> 요소에는 placeholder 속성이 공식적으로 지원되지 않습니다. 이는 HTML 표준에 따른 것으로, 날짜 입력 필드는 브라우저가 제공하는 전용 UI(달력 선택기 등)를 사용하기 때문에 일반 텍스트 입력 필드처럼 자리 표시자를 표시할 수 없습니다.
그런데도 Safari 브라우저에서는 placeholder가 정상적으로 작동하는 것처럼 보인 적이 있을 것입니다. 그 이유는 Safari가 date 타입을 완전히 지원하지 않기 때문입니다. Safari는 해당 요소를 인식하지 못하면 이를 일반 텍스트 필드로 대체(fallback) 처리하며, 이 과정에서 placeholder 속성이 무시되지 않고 그대로 적용됩니다.
Safari 데스크톱에서의 해결 방법
따라서 Safari 데스크톱 환경에서는 아래와 같이 작성하면 placeholder가 의도한 대로 표시됩니다.
<input type="date" name="dob" id="dob" value="" placeholder="생년월일 입력" />
다만 이 방법은 Safari가 date 타입을 지원하지 않는다는 점에 의존하는 것이므로, 향후 Safari가 date 타입을 완전히 지원하게 되면 더 이상 작동하지 않을 수 있다는 점을 유의해야 합니다.
Safari 모바일(iOS)에서의 해결 방법
iOS의 Safari(모바일 버전)에서는 위 방법만으로는 충분하지 않습니다. 이 경우 CSS의 :after 가상 요소와 attr() 함수를 활용하여 placeholder 텍스트를 강제로 표시할 수 있습니다.
CSS 코드는 다음과 같습니다.
input[type='date']:after {
color: #000000;
content: attr(placeholder);
}그리고 이에 대응하는 HTML 마크업은 아래와 같습니다.
<input name="mydate" type="date" value="" placeholder="생년월일 입력" />
정리 및 추가 팁
요약하면 다음과 같습니다.
- 표준 동작:
input[type=date]에는 placeholder 속성이 지원되지 않습니다. - Safari 데스크톱: date 타입 미지원으로 인해 일반 텍스트 필드로 fallback되어 placeholder가 표시됩니다.
- Safari 모바일: CSS의
:after가상 요소와content: attr(placeholder)를 사용하여 해결할 수 있습니다.
크로스 브라우저 환경에서 일관된 사용자 경험을 제공하려면, placeholder에만 의존하기보다는 <label> 요소를 함께 사용하거나 JavaScript로 날짜 필드의 포커스/값 변화를 감지해 안내 문구를 표시하는 방식을 병행하는 것이 좋습니다. 이렇게 하면 브라우저의 업데이트나 정책 변경에도 안정적으로 대응할 수 있습니다.