Bagaimana untuk Menyesuaikan Jenis Input Julat HTML5 untuk Kelihatan Seperti Bar Kemajuan?

Menyesuaikan Penampilan Jenis Input Julat HTML5

Jenis input julat HTML5 menyediakan cara yang mudah untuk mengumpulkan input pengguna dalam julat yang ditentukan. Secara lalai, penyemak imbas memberikan input julat dengan penggayaan asli mereka, yang mungkin tidak sentiasa sejajar dengan reka bentuk UI yang diingini. Dalam artikel ini, kami akan meneroka cara untuk menyesuaikan rupa jenis input julat menggunakan CSS untuk mencapai estetik seperti bar kemajuan.

Pernyataan Masalah:

" Saya mahu mengubah suai rupa jenis input julat HTML5 untuk menyerupai bar kemajuan, tetapi menggunakan atribut CSS dengan kelas CSS nampaknya tidak mempunyai sebarang kesan."

Penyelesaian:

Untuk menyesuaikan rupa jenis input julat:

1. Alih keluar Penggayaan Asli: Gunakan -webkit-appearance: none !important sifat CSS untuk mengatasi lalai penyemak imbas penggayaan. Ini memastikan bahawa sebarang gaya tersuai yang anda gunakan akan diutamakan.
2. Konfigurasikan Latar Belakang: Tetapkan sifat latar belakang untuk menyesuaikan warna latar belakang dan ketinggian runut input julat.
3. Sesuaikan Ibu Jari: Ubah suai rupa ibu jari (pemegang) dengan menetapkan -webkit-slider-thumb pseudo-elemen sifat latar belakang, ketinggian dan lebar.

Kod CSS:

<code class="css">input[type='range'] {
    -webkit-appearance: none !important;
    background: red;
    height: 7px;
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    background: blue;
    height: 10px;
    width: 10px;
}</code>

Dengan menggunakan kod CSS ini, anda boleh mengubah jenis input julat standard menjadi bar kemajuan gaya tersuai, lengkap dengan trek dan pemegang berwarna.

Atas ialah kandungan terperinci Bagaimana untuk Menyesuaikan Jenis Input Julat HTML5 untuk Kelihatan Seperti Bar Kemajuan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!