Cara menghapus gaya default tanggal tipe input di html5

Cara menghapus gaya default tipe input tanggal di HTML5. Berikut pengenalan detailnya melalui artikel ini.

2. Ubah gaya kontrol tanggal dan waktu. Saat ini, ada 9 elemen semu berikut di WebKit yang dapat mengubah UI kontrol tanggal:

 ::-webkit-datetime-edit - mengontrol area pengeditan ::-webkit-datetime-edit-fields-wrapper - mengontrol area tahun, bulan dan hari ::-webkit-datetime-edit-text - mengontrol tahun, bulan dan hari Garis miring atau garis antara ::-webkit-datetime-edit-month-field – mengontrol bulan::-webkit-datetime-edit-day-field – Kontrol hari tertentu::-webkit-datetime-edit-year-field – mengontrol teks tahun, seperti spasi yang ditempati oleh empat huruf 2017::-webkit-inner-spin-button – ini adalah kontrol dari panah kecil atas dan bawah:: -webkit-calendar-picker-indicator – Ini mengontrol panah drop-down::-webkit-clear-button – Ini mengontrol tombol hapus

Berikut ini termasuk elemen semu yang digunakan berdasarkan tanggal, waktu, minggu, dan waktu:

 masukan::-webkit-datetime-edit{}input::-webkit-datetime-edit-fields-wrapper{}input::-webkit-datetime-edit-ampm-field{}input::-webkit-datetime-edit -masukan-bidang-hari::-webkit-tanggal-waktu-edit-jam -field{}input::-webkit-datetime-edit-millisecond-field{}input::-webkit-datetime-edit-menit-field{}input::-webkit-datetime-edit-month-field{}input ::-webkit-datetime-edit-bidang kedua{}masukan: :-webkit-datetime-edit-week-field{}input::-webkit-datetime-edit-year-field{}input::-webkit-datetime-edit-ampm-field:fokus{}input::-webkit -datetime-edit-day-field:fokus{}input::-webkit-dateti saya-edit-jam-bidang:fokus{}input::-webkit-datetime-edit-milidetik-bidang:fokus{}input::-webkit-datetime-edit-menit-bidang:fokus{}input::-webkit -tanggalwaktu-edit-bulan-bidang:fokus{}masukan::-webki t-datetime-edit-second-field:focus{}input::-webkit-datetime-edit-week-field:focus{}input::-webkit-datetime-edit-year-field:focus{}input:: -webkit-datetime-edit-year-field[dinonaktifkan]{}masukan::- webkit-datetime-edit-month-field[dinonaktifkan]{}input::-webkit-datetime-edit-week-field[dinonaktifkan]{}input::-webkit-datetime-edit-day-field[dinonaktifkan]{} masukan::-webkit-datetime-edit-ampm-field[disab led]{}input::-webkit-datetime-edit-hour-field[dinonaktifkan]{}input::-webkit-datetime-edit-millisecond-field[dinonaktifkan]{}input::-webkit-datetime-edit- kolom menit[dinonaktifkan]{}input::-webkit-datetim e-edit-second-field[dinonaktifkan]{}input::-webkit-datetime-edit-text{}input::-webkit-inner-spin-button{}input::-webkit-calendar-picker-indicator{ }input::-webkit-calendar-picker-indicator:hover{}

Segitiga kecil yang mengubah tinggi baris dan tinggi tipe tanggal tidak akan menyesuaikan dengan ukurannya. Jelek sekali, jadi saya putuskan untuk menyembunyikannya.

Css berikut dapat menghilangkan segitiga atas dan bawah pada tanggal, namun tetap mempertahankan segitiga kecil yang tipe inputnya adalah angka.

 masukan[tipe=tanggal]::-webkit-inner-spin-button { visibilitas: tersembunyi }

Kotak input yang tipe inputnya adalah tanggal memiliki atribut sebagai berikut yang dapat disesuaikan dengan kebutuhan Anda.

 ::-webkit-datetime-edit { padding: 1px; latar belakang: url(../selection.gif }::-webkit-datetime-edit-fields-wrapper { warna latar: #eee; webkit-datetime-edit-text { warna: #4D90FE; padding: 0 .3em; warna: ungu; }::-webkit-tanggal-waktu-edit-bulan-{ warna: biru; }::-webkit-tanggal-edit-hari-bidang { warna: hijau }::-webkit-putaran dalam- tombol { visibilitas: tersembunyi; }::-webkit-calendar-picker-indicator {batas: 1px solid #ccc;border-radius: 2px;box-shadow: inset 0 1px #fff, 0 1px #eee;warna latar: #eee;gambar latar: -webkit-linear-gradient(atas, #f0f0f0, #e6e6e6);warna: #666;}

Di atas adalah metode yang diperkenalkan editor kepada Anda untuk menghapus gaya default tipe input tanggal di HTML5. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda pada waktunya. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!