Bagaimanakah Saya Mengubah Input Julat HTML5 Standard Menjadi Bar Kemajuan Tersuai Menggunakan CSS?

Menyesuaikan Input Julat HTML5 dengan CSS

Jenis input julat HTML5 menawarkan cara input pengguna yang serba boleh, tetapi penampilan lalainya mungkin tidak sentiasa selaras dengan estetika yang diingini. Artikel ini menyelidiki teknik khusus yang diperlukan untuk menyesuaikan pembentangannya ke dalam reka bentuk seperti bar kemajuan menggunakan CSS.

Walaupun percubaan untuk mengubah suai penampilannya menggunakan atribut CSS konvensional, usaha tersebut mungkin terbukti tidak berkesan. Untuk mengatasi halangan ini, adalah penting untuk mengatasi penggayaan lalai yang digunakan oleh pelayar web. Ini boleh dicapai dengan menetapkan secara eksplisit sifat -webkit-appearance kepada tiada untuk kedua-dua input julat itu sendiri dan komponen ibu jarinya.

Menyesuaikan Input Julat:

Untuk ubah suai rupa input julat, gunakan peraturan CSS berikut:

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

Kod ini menetapkan warna latar belakang kepada merah dan melaraskan ketinggian kepada 7 piksel, memberikannya ilusi bar kemajuan.

Menyesuaikan Ibu Jari Julat:

Seterusnya, untuk menyesuaikan ibu jari julat, gunakan peraturan CSS berikut:

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

Gaya ini menentukan latar belakang biru , tetapkan ketinggian dan lebar kepada 10 piksel dan pastikan ibu jari mempunyai penampilan yang sepadan dengan bar kemajuan yang lain.

Dengan menggunakan peraturan CSS ini, anda boleh berjaya mengubah input julat standard menjadi kemajuan yang disesuaikan elemen UI seperti bar, meningkatkan daya tarikan estetiknya dan menyelaraskannya dengan keperluan reka bentuk khusus.

Atas ialah kandungan terperinci Bagaimanakah Saya Mengubah Input Julat HTML5 Standard Menjadi Bar Kemajuan Tersuai Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!