Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mengalih Keluar Teks Pemegang Tempat Lalai daripada Input Tarikh HTML5?

Bagaimana untuk Mengalih Keluar Teks Pemegang Tempat Lalai daripada Input Tarikh HTML5?

DDD
DDDasal
2024-11-09 17:57:02452semak imbas

How to Remove the Default Placeholder Text from HTML5 Date Inputs?

Mengalih keluar Teks Lalai daripada Input Tarikh HTML5

Elemen input HTML5 dengan type="date" menyediakan cara yang mudah untuk memilih tarikh, tetapi ia selalunya memaparkan format tarikh lalai (cth., mm/dd/yyyy) sebagai ruang letak dalam medan input. Teks pemegang tempat ini boleh mengganggu atau tidak diingini dalam situasi tertentu.

Untuk mengalih keluar teks lalai ini sambil masih membenarkan pengguna memilih tarikh:

  1. Gunakan CSS ' ::-webkit-datetime-edit-*' pemilih:

    Pemilih ini menyasarkan bahagian tertentu elemen input tarikh, termasuk medan tahun, bulan dan hari.

  2. Tetapkan warna kepada lutsinar untuk medan kosong:

    Dengan menetapkan warna kepada lutsinar untuk medan yang tidak mempunyai nilai yang dipilih pada masa ini (iaitu, medan dengan kosong ' atribut aria-valuenow'), anda boleh menyembunyikan teks pemegang tempat lalai dengan berkesan.

::-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;
}

Atas ialah kandungan terperinci Bagaimana untuk Mengalih Keluar Teks Pemegang Tempat Lalai daripada Input Tarikh HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn