::-moz-range-progress
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Phần tử giả CSS ::-moz-range-progress là một phần mở rộng của Mozilla đại diện cho phần dưới của rãnh trượt (tức là rãnh) mà chỉ số trượt di chuyển trong một <input> với type="range". Phần này tương ứng với các giá trị thấp hơn giá trị hiện đang được chọn bởi nút trượt (tức là núm ảo).
Note:
Sử dụng ::-moz-range-progress với bất kỳ thứ gì khác ngoài <input type="range"> sẽ không khớp với bất cứ thứ gì và không có hiệu lực.
Cú pháp
::-moz-range-progress {
/* ... */
}
Ví dụ
HTML
<input type="range" min="0" max="100" step="5" value="50" />
CSS
input[type="range"]::-moz-range-progress {
background-color: green;
height: 1em;
}
Kết quả
Thanh tiến trình sử dụng kiểu này có thể trông như thế này:
Đặc tả
Không thuộc bất kỳ tiêu chuẩn nào.
Tương thích trình duyệt
Xem thêm
-
Các phần tử giả được Gecko dùng để tạo kiểu cho các phần khác của input range:
::-moz-range-thumbđại diện cho chỉ số trượt trong rãnh.::-moz-range-trackđại diện cho rãnh mà nút trượt di chuyển.
-
CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS