HTML5의 `` 요소에서 기본 자리 표시자 텍스트를 숨기는 방법은 무엇입니까?

HTML5의 에서 기본 자리 표시자 텍스트를 제거하는 방법 요소

유형이 "날짜"로 설정된 HTML5 입력 요소를 사용하는 경우 요소는 자동으로 기본 날짜 형식(mm/dd/yyyy)을 자리 표시자로 표시합니다. 이 자리 표시자 텍스트는 특정 시나리오에서 방해가 될 수 있습니다.

이 기본 텍스트를 제거하려면 선택한 날짜 값을 숨길 수 있는 다음 스타일시트 규칙을 사용하지 마세요.

input[type=date]::-webkit-datetime-edit-text {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-month-field{
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-day-field {
    -webkit-appearance: none;
    display: none;
}
input[type=date]::-webkit-datetime-edit-year-field {
    -webkit-appearance: none;
    display: none;
}

대신, 다음 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;
}

이 규칙은 날짜 입력 요소의 연도, 월, 일 필드를 대상으로 하며 해당하는 경우 해당 색상을 투명하게 설정합니다. "aria-valuenow" 속성이 없습니다. 결과적으로 선택한 날짜는 계속 표시되는 동안 자리 표시자 텍스트는 보이지 않게 됩니다.

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