Bagaimanakah Saya Boleh Menggayakan Input Julat HTML5 dengan Dua Warna Berbeza (Hijau dan Kelabu)?

Menggayakan Input Julat HTML5 dengan Warna Berbeza

Masalah:

Untuk mencapai input julat yang menarik secara visual, di sebelah kiri sebelah hijau dan sebelah kanan kelabu.

Penyelesaian:

Mencapai kesan ini memerlukan penggayaan khusus pelayar. Walaupun penyelesaian CSS tulen boleh dilakukan, ia berbeza-beza bergantung pada penyemak imbas yang disasarkan.

Penyelesaian CSS untuk Chrome:

• Sembunyikan limpahan daripada input[julat].
• Isi ruang ibu jari sebelum ini dengan warna sebelah kiri yang diingini menggunakan bayang.

Penyelesaian CSS untuk IE:

• Gunakan elemen pseudo-bawah terbina dalam ::-ms-fill-lower untuk menetapkan warna sebelah kiri.

Penyelesaian CSS untuk Firefox:

• Gunakan terbina dalam ::-moz-range-progress pseudo-element untuk menetapkan warna sebelah kiri.

Kod Contoh:

/* Chrome */
input[type='range']::-webkit-slider-thumb {
  box-shadow: -80px 0 0 80px #43e5f7;
}

/* IE */
input[type="range"]::-ms-fill-lower {
  background-color: #43e5f7;
}

/* Firefox */
input[type="range"]::-moz-range-progress {
  background-color: #43e5f7;
}

Kod CSS ini memastikan bahagian kiri input julat berwarna hijau dan bahagian kanan kekal kelabu, memberikan kesan visual yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Input Julat HTML5 dengan Dua Warna Berbeza (Hijau dan Kelabu)?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!