Bagaimana untuk Menyembunyikan Teks Pemegang Tempat Lalai dalam Elemen `` HTML5?

Cara Mengalih Keluar Teks Pemegang Tempat Lalai daripada HTML5; Elemen

Apabila menggunakan elemen input HTML5 dengan jenis ditetapkan kepada "tarikh", elemen tersebut secara automatik memaparkan format tarikh lalai (mm/dd/yyyy) sebagai pemegang tempat di dalamnya. Teks pemegang tempat ini boleh menimbulkan halangan dalam senario tertentu.

Untuk mengalih keluar teks lalai ini, elakkan menggunakan peraturan lembaran gaya berikut, kerana ia akan menyembunyikan nilai tarikh yang dipilih:

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

Sebaliknya, gunakan peraturan CSS berikut untuk menyembunyikan teks pemegang tempat tanpa menjejaskan nilai tarikh yang dipilih:

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

Peraturan ini menyasarkan tahun, bulan dan hari bagi elemen input tarikh dan menetapkan warnanya kepada telus jika ia tidak mempunyai atribut "aria-valuenow". Akibatnya, teks pemegang tempat menjadi tidak kelihatan manakala tarikh yang dipilih kekal kelihatan.

Atas ialah kandungan terperinci Bagaimana untuk Menyembunyikan Teks Pemegang Tempat Lalai dalam Elemen `` HTML5?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!