Cách tạo kiểu <kiểu đầu vào = 'phạm vi' /> trong IE10

Question

Tôi muốn tạo kiểu cho phần tử <input type='range' /> trong IE10.

Theo mặc định, trình duyệt IE 10 phong cách các yếu tố như thế này:

Tôi muốn tùy chỉnh nó một chút, nói rằng, việc thay đổi màu xanh sang màu đỏ, màu xám sang màu đen, những quán bar nhỏ sang màu vàng, ít chà sàn màu đen trắng. Tôi đã thử ghi đè thuộc tính background-color và thuộc tính color trong CSS. Nhưng nó không hoạt động.

Bất kỳ ý tưởng nào?

Answer 1

Có một số phần tử giả bạn có thể sử dụng để điều khiển phạm vi kiểu trong IE10.

input[type="range"]::-ms-fill-upper { 
    background-color: green; 
} 

Sẽ tô màu phần sau ngón cái. Để tạo kiểu trước khi sử dụng ngón tay cái:

input[type="range"]::-ms-fill-lower { 
    background-color: lime green; 
} 

Xem ví dụ http://jsfiddle.net/K8WyC/4/

để tạo kiểu cho ngón tay cái, bạn có thể sử dụng :: - ms-ngón tay cái, trong khi các vết đánh dấu có thể được phong cách với ::-ms-ticks-before, ::-ms-ticks-after, hoặc ::-ms-track (phong cách thứ hai cả hai bên).Bạn có thể tìm hiểu thêm về các giả yếu tố khác nhau cho các điều khiển tại http://msdn.microsoft.com/en-us/library/ie/hh869604(v=vs.85).aspx

Các phong cách bạn đang yêu cầu có thể đạt được như trong fiddle sau: http://jsfiddle.net/K8WyC/8/

Answer 2

Bạn có thể sử dụng các yếu tố giả Microsoft CSS:

• :: - ms-fill-thấp
• :: - ms-fill-thượng
• :: - ms-thumb
• :: - ms-ti cks-trước
• :: - ms-ve-sau
• :: - ms-ve
• :: - ms-tooltip

Here the full Microsoft pseudo list...

IE10

Here is a page with styled IE10 range controls (Mở bằng IE10)

WebKit

WebKit shadow DOM

Các trình duyệt khác

How to style range control for multiple browsers

Answer 3

trong câu trả lời trước đó,

::-ms-ticks 

nên đọc

012.

::-ms-track 

(chỉ là bản nhạc bình thường). Màu đánh dấu được đặt bởi

::-ms-track {color:red;} 

Chiều cao dấu là chiều cao của bản nhạc và không thể đặt chiều rộng. Bọ ve đều bị loại, cũng được biết đến, với

::-ms-track {color:transparent;} 

Các giả yếu tố

::-ms-ticks-before, 
::-ms-ticks-after { 
display:block; (or inline-block) 
color:red; 
height:10px; 
} 

tạo ve thêm trên và dưới theo dõi. Người ta có thể thiết lập màu sắc của họ và chiều cao của họ. Không thể đặt độ rộng dấu kiểm. Hiển thị có vẻ bắt buộc.

Internet Explorer vì IE10 có mặc định đệm dọc. Đệm đầu là 17px, đệm đáy là 32px. Điều này làm cho một thanh trượt heigh theo mặc định. Do đó,

padding:0px; 

có thể được áp dụng. (Xem https://connect.microsoft.com/IE/feedback/details/792971/input-type-range-has-vertical-padding-by-default.)

(Vì tôi chưa thể nhận xét, tôi đăng bài như thế này).