accent-color
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Thuộc tính CSS accent-color đặt màu accent cho các điều khiển giao diện người dùng được tạo ra bởi một số phần tử.
Try it
accent-color: red;
accent-color: #74992e;
accent-color: rgb(255 255 128);
accent-color: hsl(250 100% 34%);
<section class="default-example container" id="default-example">
<div>
<input checked id="example-element" type="checkbox" />
<label for="example-element" id="example-label">Example Label</label>
</div>
</section>
.container > div {
display: flex;
align-items: center;
}
#example-element {
width: 40px;
height: 40px;
}
#example-label {
margin-left: 10px;
font-size: x-large;
}
Cú pháp
css
/* Giá trị từ khóa */
accent-color: auto;
/* Giá trị <color> */
accent-color: darkred;
accent-color: #5729e9;
accent-color: rgb(0 200 0);
accent-color: hsl(228 4% 24%);
/* Giá trị toàn cục */
accent-color: inherit;
accent-color: initial;
accent-color: revert;
accent-color: revert-layer;
accent-color: unset;
Giá trị
Mô tả
Các trình duyệt hỗ trợ accent-color hiện tại áp dụng nó cho các phần tử HTML sau:
Mỗi tác nhân người dùng có một màu nhấn, với các biến thể để đảm bảo khả năng đọc và độ tương phản. Màu nhấn đó không được dùng cho mọi điều khiển giao diện người dùng hay trong mọi trạng thái của điều khiển. accent-color chỉ được áp dụng cho các điều khiển giao diện người dùng sử dụng màu nhấn trong các trạng thái mà nó có thể áp dụng.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | auto is computed as specified and <color> values are computed as defined for the color property. |
| Animation type | by computed value type |
Cú pháp hình thức
accent-color =
auto |
<color>
Ví dụ
Đặt màu nhấn tùy chỉnh
HTML
html
<input type="checkbox" checked />
<input type="checkbox" class="custom" checked />
CSS
css
input {
accent-color: auto;
display: block;
width: 30px;
height: 30px;
}
input.custom {
accent-color: rebeccapurple;
}
Kết quả
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Basic User Interface Module Level 4 # widget-accent |
Tương thích trình duyệt
Xem thêm
background-color,border-color,caret-color,color,column-rule-color,outline-color,text-decoration-color,text-emphasis-color,text-shadow: Các thuộc tính liên quan đến màu sắc khác<color>: Kiểu dữ liệu liên quan<input>: Phần tử HTML liên quan