Cách tạo kiểu nhập dải ô HTML5 để có màu khác nhau trước và sau thanh trượt?

Question

Tôi muốn bên trái có màu xanh lục và bên phải có màu xám. Như hình trên sẽ là HOÀN THÀNH. Tốt hơn là một giải pháp CSS tinh khiết (chỉ cần lo lắng về WebKit).

Điều đó có thể xảy ra không?

Answer 1

Có, điều đó là có thể. Mặc dù tôi không khuyên bạn nên vì input range không thực sự được hỗ trợ bởi tất cả các trình duyệt bởi vì một phần tử mới được thêm vào trong HTML5 và HTML5 chỉ là một bản nháp (và sẽ dài) để tạo kiểu cho nó có lẽ không phải là lựa chọn tốt nhất.

Ngoài ra, bạn cũng sẽ cần một chút JavaScript. Tôi đã tự do sử dụng thư viện jQuery cho điều này, vì mục đích đơn giản.

Đây là bạn: http://jsfiddle.net/JnrvG/1/.

Answer 2

Giờ đây, nó được hỗ trợ với các phần tử giả trong mỗi WebKit, Firefox và IE. Nhưng, tất nhiên, nó khác nhau ở mỗi người. : (

Xem this question 's câu trả lời và/hoặc tìm kiếm một CodePen tựa đề prettify <input type=range> #101 cho một số giải pháp

Answer 3

Một bản cập nhật nhỏ để này một:.

nếu bạn sử dụng sau đó sẽ cập nhật một cách nhanh chóng chứ không phải trên phiên bản chuột

"thay đổi MouseMove", chức năng"

<script> 
$('input[type="range"]').on("change mousemove", function() { 
    var val = ($(this).val() - $(this).attr('min'))/($(this).attr('max') - $(this).attr('min')); 

    $(this).css('background-image', 
       '-webkit-gradient(linear, left top, right top, ' 
       + 'color-stop(' + val + ', #2f466b), ' 
       + 'color-stop(' + val + ', #d3d3db)' 
       + ')' 
       ); 
});</script> 

Answer 4

. Tinh khiết CSS giải pháp:

• Chrome: Ẩn tràn từ input[range], và điền tất cả các không gian còn lại để ngón tay cái với màu sắc bóng.
• IE: không cần phải phát minh lại bánh xe: ::-ms-fill-lower
• Firefox không cần phải phát minh lại bánh xe: ::-moz-range-progress

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

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

<input type="range"/>

Answer 5

Các giải pháp được chấp nhận trước đó là không còn hoạt động nữa.

Tôi đã kết thúc mã hóa một hàm đơn giản bao bọc range vào một vùng chứa theo kiểu thêm thanh cần thiết trước con trỏ. Tôi đã viết this example nơi dễ dàng để xem hai màu 'màu xanh' và 'màu da cam' được đặt trong css, vì vậy chúng có thể được sửa đổi nhanh chóng.

Answer 6

input type="range" min="0" max="50" value="0" style="margin-left: 6%;width: 88%;background-color: whitesmoke;" 

trên thay đổi mã dao động kiểu đầu vào .....