::-moz-range-thumb
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-thumb là một phần mở rộng của Mozilla đại diện cho nút trượt (tức là núm ảo) của một <input> với type="range". Người dùng có thể di chuyển nút trượt dọc theo rãnh của input để thay đổi giá trị số của nó.
Note:
Sử dụng ::-moz-range-thumb 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-thumb {
/* ... */
}
Ví dụ
HTML
<input type="range" min="0" max="100" step="5" value="50" />
CSS
input[type="range"]::-moz-range-thumb {
background-color: green;
}
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-trackđại diện cho rãnh mà nút trượt di chuyển.::-moz-range-progressđại diện cho phần dưới của rãnh trượt.
-
Các phần tử giả tương tự được dùng bởi các trình duyệt khác:
::-webkit-slider-thumb, phần tử giả được hỗ trợ bởi WebKit và Blink (Safari, Chrome và Opera)
-
CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS