::-webkit-progress-inner-element

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-inner-element trong CSSphần tử giả đại diện cho vùng chứa ngoài cùng của phần tử <progress>. Nó là phần tử cha của phần tử giả ::-webkit-progress-bar.

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

css
::-webkit-progress-inner-element {
  /* ... */
}

Ví dụ

Các ví dụ này chỉ hoạt động trên Blink và WebKit.

Thêm viền đen xung quanh thanh tiến trình

Trong ví dụ này, viền đen rộng 2px được thêm xung quanh thanh tiến trình.

HTML

html
<progress value="10" max="50"></progress>

CSS

css
progress {
  -webkit-appearance: none;
}

::-webkit-progress-inner-element {
  border: 2px solid black;
}

Kết quả

Ảnh chụp màn hình kết quả

Nếu bạn không sử dụng trình duyệt Blink hoặc WebKit, đoạn mã trên tạo ra một thanh tiến trình trông như thế này:

Progressbar is a long green and grey box with a black border. The left 20% of the box is green. The right 80% is grey.

Đặ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