Có cách nào để kiểm soát phạm vi kiểm soát của HTML5 không?

Question

Có cách nào để kiểm soát phạm vi kiểm soát của HTML5 không? Có thể thay đổi màu sắc của đường trượt trên thanh trượt không?

Answer 1

Hóa ra, có trong webkit:

input[type="range"]{ 
    -webkit-appearance:none !important; 
} 

input[type="range"]::-webkit-slider-thumb{ 
    -webkit-appearance:none !important; 
} 

Sau đó bạn có thể thêm bất cứ điều gì thuộc tính bạn cần phải từng những selectors. Nền, độ dốc, v.v ...

Hy vọng điều đó sẽ hữu ích!

Answer 2

Một ví dụ đầy đủ của css cho tùy biến (tại thời điểm này cho webkit):

input[type="range"]{ 
    background: rgb(94, 30, 30); 
    width: 130px; 
    height: 6px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
} 

input[type="range"]:hover{ 
    background: rgb(194, 139, 131); 
    width: 130px; 
    height: 6px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    -webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    -moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
    box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13); 
} 

input[type="range"]::-webkit-slider-thumb{ 
    -webkit-appearance:none !important; 
    width:25px; 
    height:15px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    border:1px solid black; 

    background: #a90329; 
    background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019)); 
    background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019',GradientType=1); 
} 

input[type="range"]::-webkit-slider-thumb:hover{ 
    -webkit-appearance:none !important; 
    width:25px; 
    height:15px; 
    -webkit-appearance: none; 
    border-radius: 8px; 
    -moz-border-radius: 8px; 
    -webkit-border-radius: 8px; 
    background-color:rgb(56, 13, 13); 
    border:1px solid black; 

    background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%); 
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254)); 
    background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1); 
} 

Answer 3

Ngày đầu câu trả lời của nó đã được mô tả. Tôi chỉ tùy chỉnh nó trên con đường của tôi. Hãy xem nó có thể giúp bạn.

Thêm mã dưới đây vào CSS:

input:focus{ 
    outline-color: transparent; 
} 
input[type="range"]{ 
    -webkit-appearance:none; 
    -moz-apperance:none; 
    height: 6px; 
    background-color: #b6b6b6; 
    outline-color: transparent; 
} 
input::-webkit-slider-thumb{ 
    -webkit-appearance:none; 
    -moz-apperance:none; 
    width:16px; 
    height:16px; 
    -webkit-border-radius:10px; 
    -moz-border-radius:10px; 
    -ms-border-radius:10px; 
    -o-border-radius:10px; 
    border-radius:10px; 
    background-color: #20b373; 
    overflow: visible; 
} 

Live Demo