Bagaimanakah Saya Boleh Menggayakan Input Julat HTML5 dengan Warna Berbeza pada Setiap Sisi Menggunakan CSS?

Menggayakan Input Julat HTML5 dengan Warna Berbeza pada Mana-mana Sisi

Menggayakan input julat HTML5 untuk mempunyai warna kontras di sebelah kiri dan kanan ialah satu permintaan biasa. Apabila pengguna berinteraksi dengan peluncur, warna berubah secara dinamik, memberikan maklum balas visual pada nilai input. Mencapai kesan ini dalam CSS tulen mungkin kelihatan seperti satu cabaran, tetapi ia mungkin.

Untuk Chrome, silapnya terletak pada menyembunyikan limpahan daripada input dan menggunakan bayangan kotak untuk mengisi baki yang tinggal. ruang dengan warna yang dikehendaki. Teknik ini berkesan melukis bahagian kiri peluncur dengan warna tersuai.

Untuk IE dan Firefox, kami boleh memanfaatkan elemen pseudo CSS terbina dalam:

• Dalam IE: ::-ms-fill-lower membolehkan anda menggayakan bahagian bawah peluncur, membolehkan warna hijau.
• Dalam Firefox: ::-moz-range-progress memberi anda kawalan yang sama, membolehkan anda mentakrifkan warna untuk bahagian gelangsar yang diisi.

Untuk menggambarkan penyelesaian CSS, rujuk kod berikut:

@media screen and (-webkit-min-device-pixel-ratio:0) {
  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;
  }
}

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;
}

Menggunakan CSS ini kod, anda boleh menggayakan input julat HTML5 anda untuk memaparkan warna yang berbeza pada kedua-dua belah peluncur, mencipta antara muka yang menarik secara visual dan mesra pengguna untuk aplikasi web anda.

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