Bagaimanakah Saya Boleh Menggayakan Input Julat HTML5 dengan Warna Berbeza pada Setiap Bahagian?

Menggayakan Input Julat HTML5 dengan Warna Berbeza pada Setiap Sisi

Mencapai pelbagai warna sebelum dan selepas penggelangsar input julat HTML5 memerlukan pelayar- khusus menghampiri.

Chrome:

• Sembunyikan peluncur lalai dengan menetapkan limpahan: tersembunyi dan lebar pada elemen input.
• Isi kawasan di sebelah kiri ibu jari dengan warna latar belakang yang diingini.
• Buat ibu jari dan kedudukan peluncur tersuai ia 80px di sebelah kanan kedudukan semula jadi ibu jari.
• Pastikan ibu jari tersuai lebih besar daripada lebar input untuk menutup ibu jari lalai sepenuhnya.

IE:

• Manfaatkan ::-ms-fill-lower elemen pseudo untuk menetapkan warna latar belakang di sebelah kiri ibu jari.
• Gunakan ::-ms-fill-upper untuk menetapkan warna latar belakang di sebelah kanan ibu jari.

Firefox:

• Gunakan ::-moz-range-progress pseudo-element untuk menetapkan warna latar belakang di sebelah kiri ibu jari.
• Tetapkan warna latar belakang trek menggunakan ::-moz-range-track.

Contoh Kod:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  input[type='range'] {
    overflow: hidden;
    width: 80px;
    background-color: #9a905d;
  }

  input[type='range']::-webkit-slider-runnable-track {
    height: 10px;
    color: #13bba4;
    margin-top: -1px;
  }

  input[type='range']::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    cursor: ew-resize;
    background: #434343;
    box-shadow: -80px 0 0 80px #43e5f7;
  }
}

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

input[type="range"]::-moz-range-track {
  background-color: #9a905d;
}

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

input[type="range"]::-ms-fill-upper {
  background-color: #9a905d;
}

<input type="range" />

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggayakan Input Julat HTML5 dengan Warna Berbeza pada Setiap Bahagian?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!