Bolehkah saya Menggayakan Input Julat HTML5 dengan Dua Warna Berbeza Hanya Menggunakan CSS?

Menggayakan Input Julat HTML5 dengan Warna Berbeza

Soalan:

Adakah mungkin untuk menggayakan input julat HTML5 untuk mempunyai warna yang berbeza pada kedua-dua belah peluncur? Sebagai contoh, hijau di sebelah kiri dan kelabu di sebelah kanan? Sebaik-baiknya, penyelesaian CSS tulen akan diutamakan, serasi dengan penyemak imbas WebKit.

Penyelesaian:

Sudah tentu, mencapai penyesuaian ini dengan CSS tulen adalah boleh dilaksanakan. Penyelesaian kami memanfaatkan sifat CSS khusus penyemak imbas untuk menyasarkan penyemak imbas yang berbeza:

Chrome:

input[type='range'] {
  overflow: hidden;
  width: 80px;
  -webkit-appearance: none;
  background-color: #9a905d;
}

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

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

Firefox:

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

Internet Penjelajah:

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

Snippet HTML:

<input type="range"/>

Coretan kod ini akan mencipta input julat dengan bahagian kiri hijau dan sebelah kanan kelabu . Untuk kefungsian penuh dalam semua penyemak imbas utama, pastikan anda memasukkan semua blok kod khusus penyemak imbas yang disediakan.

Atas ialah kandungan terperinci Bolehkah saya Menggayakan Input Julat HTML5 dengan Dua Warna Berbeza Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!