>웹 프론트엔드 >CSS 튜토리얼 >HTML5 날짜 입력 요소에서 기본 자리 표시자 텍스트를 제거하는 방법은 무엇입니까?

HTML5 날짜 입력 요소에서 기본 자리 표시자 텍스트를 제거하는 방법은 무엇입니까?

Patricia Arquette
Patricia Arquette원래의
2024-11-08 18:21:02253검색

How to Remove the Default Placeholder Text from HTML5 Date Input Elements?

HTML5 날짜 입력 요소에서 기본 자리 표시자 텍스트 제거

HTML5 날짜 입력 요소는 사용자로부터 날짜 값을 수집하는 편리한 방법을 제공합니다. 그러나 여기에는 mm/dd/yyyy 형식의 기본 자리 표시자 텍스트가 포함되어 있어 주의가 산만해지거나 필요한 특정 날짜 형식과 충돌할 수 있습니다.

자리 표시자 텍스트 제거

기본 자리 표시자 텍스트를 제거하려면 날짜 입력 요소에 다음 CSS를 적용합니다.

::-webkit-datetime-edit-year-field:not([aria-valuenow]),
::-webkit-datetime-edit-month-field:not([aria-valuenow]),
::-webkit-datetime-edit-day-field:not([aria-valuenow]) {
    color: transparent;
}

이 코드는 날짜 입력의 편집 인터페이스 내의 특정 하위 필드를 대상으로 합니다. 색상을 투명하게 설정하면 기본 텍스트가 보이지 않게 됩니다. 특히, not([aria-valuenow]) 선택기를 사용하면 날짜를 선택한 경우에도 자리 표시자 텍스트가 숨겨진 상태로 유지됩니다.

이전에 시도한 CSS와 달리 이 방법은 날짜 표시자를 선택적으로 숨기면서 자리 표시자를 숨깁니다. 선택한 날짜 값입니다.

위 내용은 HTML5 날짜 입력 요소에서 기본 자리 표시자 텍스트를 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.