HTML5 の日付入力要素でデフォルトのプレースホルダーを非表示にする方法

HTML5 日付入力要素のデフォルトのプレースホルダーを非表示にする方法

type="date" の HTML5 入力要素を利用する場合、入力フィールド内に表示されるデフォルトの日付形式 (例: mm/dd/yyyy)。このデフォルトのテキストを削除すると、ユーザー エクスペリエンスが向上し、混乱や不必要なデータ入力を防ぐことができます。

1 つの方法は、CSS スタイルを利用して入力フィールドの外観を変更することです。ただし、提供した例のように、重要な日付値を隠さないようにすることが重要です。

望ましい結果を達成するには、次の改良された 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;
}

このコードは、入力要素内の年、月、日フィールドの外観。有効な日付が入力されていない場合は、透明で表示され、選択した日付値に影響を与えることなく、デフォルトのプレースホルダーが事実上非表示になります。

以上がHTML5 の日付入力要素でデフォルトのプレースホルダーを非表示にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。