Rumah >hujung hadapan web >tutorial css >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:
IE:
Firefox:
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!