::-webkit-progress-bar
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ả ::-webkit-progress-bar trong CSS là phần tử giả đại diện cho toàn bộ thanh của phần tử <progress>. Thông thường nó chỉ hiển thị như phần chưa được lấp đầy của thanh, vì theo mặc định nó được hiển thị bên dưới phần tử giả ::-webkit-progress-value. Nó là phần tử con của phần tử giả ::-webkit-progress-inner-element và là phần tử cha của phần tử giả ::-webkit-progress-value.
Note:
Để ::-webkit-progress-value có hiệu lực, appearance cần được đặt thành none trên phần tử <progress>.
Cú pháp
::-webkit-progress-bar {
/* ... */
}
Ví dụ
CSS
progress {
-webkit-appearance: none;
}
::-webkit-progress-bar {
background-color: orange;
}
HTML
<progress value="10" max="50"></progress>
Kết quả
Ảnh chụp màn hình kết quả
Đoạn mã trên tạo ra một thanh tiến trình trông như thế này khi sử dụng trình duyệt WebKit hoặc Blink:
Đặ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 WebKit/Blink sử dụng để tạo kiểu cho các phần khác của phần tử
<progress>: ::-moz-progress-bar