Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Menggayakan Input Julat HTML5 dengan Warna Berbeza pada Setiap Bahagian?

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

DDD
DDDasal
2024-12-20 13:20:10754semak imbas

How Can I Style HTML5 Range Inputs with Different Colors on Each Side?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn