Bagaimanakah Saya Boleh Menyesuaikan Penampilan Peluncur Input Julat HTML5 dalam Pelayar Berbeza?

Mewarnai Peluncur Input Julat HTML5 untuk WebKit

Pelayar berasaskan WebKit memaparkan peluncur input julat asli dengan penampilan yang konsisten. Walau bagaimanapun, menambah penggayaan tersuai untuk mengubah suai penampilan peluncur ini boleh menjadi mencabar.

Untuk Chrome:

• Helah Limpahan: Sembunyikan peluncur lalai dengan menetapkan limpahan: tersembunyi pada input.
• Bayang Kesan: Cipta kesan bayang-bayang untuk mengisi ruang kiri ibu jari dengan warna yang diingini.

Untuk IE dan Firefox (Sokongan Asli):

• ::-ms-fill-lower: Gunakan elemen pseudo ini dalam IE untuk mengisi kawasan di bawah ibu jari.
• ::-moz-range-progress: Gunakan elemen pseudo ini dalam Firefox untuk mengisi kawasan di hadapan ibu jari.

Pelaksanaan Kod CSS:

/* Chrome */
@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;
  }
}

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

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

HTML Contoh:

<input type="range"/>

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menyesuaikan Penampilan Peluncur Input Julat HTML5 dalam Pelayar Berbeza?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!