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 中国語 Web サイトの他の関連記事を参照してください。