Thuộc tính accent-color CSS đặt màu nhấn cho các điều khiển giao diện người dùng được tạo bởi một số yếu tố.accent-color CSS property sets the accent color for user-interface controls generated by some elements. Các trình duyệt hỗ trợ accent-color hiện đang áp dụng nó cho các phần tử HTML sau:Thử nó
auto |
<color> 0
auto |
<color> 1
auto |
<color> 2
auto |
<color> 3
Cú pháp
/* Keyword values */ accent-color: auto; /* <color> values */ accent-color: darkred; accent-color: #5729e9; accent-color: rgb(0, 200, 0); accent-color: hsl(228, 4%, 24%); /* Global values */ accent-color: inherit; accent-color: initial; accent-color: revert; accent-color: revert-layer; accent-color: unset;
Giá trị
accent-color =
auto |
<color> 4
Đại diện cho một màu được chọn UA, sẽ phù hợp với màu nhấn của nền tảng, nếu có.
accent-color =auto |
<color> 5
Chỉ định màu được sử dụng làm màu nhấn.
Định nghĩa chính thức
Cú pháp chính thức
accent-color =
auto |
<color>
Ví dụ
Đặt màu nhấn tùy chỉnh
HTML
<input type="checkbox" checked /> <input type="checkbox" class="custom" checked />
CSS
input { accent-color: auto; display: block; width: 30px; height: 30px; } input.custom { accent-color: rebeccapurple; }
Kết quả
Thông số kỹ thuật
CSS Cơ bản Người dùng Mô-đun người dùng cấp 4 # Widget-accent # widget-accent |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt
Xem thêm
Yêu cầu kéo CSSWG #5187 (GitHub)
Yêu cầu kéo CSSWG #5187 (GitHub)
.element { accent-color: #f8a100; }Thuộc tính CSS màu Accent (Trạng thái nền tảng Chrome)
Vé lỗi Firefox #1705605 (Mozilla Bugzilla)
accent-color: auto | <color>;- Vé lỗi Safari #227587 (Safari Bugzilla) auto
- Yêu cầu về vị trí: Thuộc tính CSS màu Accent (Thông báo Chromium đến Safari) all elements
- Thuộc tính accent-color trong CSS có khả năng ghi lại màu có dấu của các điều khiển biểu mẫu được cung cấp bởi các kiểu mặc định của trình duyệt với giá trị màu tùy chỉnh. yes
- accent-color được xác định trong mô -đun giao diện người dùng cơ bản CSS Cấp độ 4, hiện đang trong bản nháp hoạt động. Điều đó có nghĩa là các chi tiết vẫn là một công việc đang tiến triển và có thể thay đổi giữa bây giờ và khi thông số kỹ thuật trở thành một khuyến nghị chính thức. the keyword accent-color =
auto |
<color> 4 or a computed color - Cú pháp by computed value type
Giá trị ban đầu: Tự động
/* Keyword */ accent-color: auto; /* <color> */ accent-color: red; accent-color: #f8a100 accent-color: rgba(102, 100, 70, 1); accent-color: hsla(180, 100%, 70%, 1); /* Global*/ accent-color: inherit; accent-color: initial; accent-color: revert; accent-color: unset;Áp dụng cho: Tất cả các yếu tố
Kế thừa: Có
Giá trị tính toán: Từ khóa accent-color =
auto |
<color> 4 hoặc màu được tính toán
Loại hoạt hình: theo loại giá trị được tính toán
Giá trị
Cuối cùng, một cách dễ dàng của người Viking đến các hình thức phong cách!
- Các hình thức kiểu dáng theo truyền thống là tốt, khủng khiếp. Không cần phải xem xét xa hơn là tùy chỉnh yếu tố accent-color =
auto |
<color> 3 để xem mức độ khó khăn đối với các điều khiển kiểu. Những gì thường dẫn đến là một quyết định giữa việc chấp nhận các kiểu mặc định của trình duyệt hoặc một thang máy chính để thiết lập lại và tái tạo chúng từ đầu. - Ở đây, những gì thường cần để có được một màu accent-color =
auto |
<color> 3 tùy chỉnh: - accent-color cho phép chúng tôi thay đổi màu được sử dụng trong các điều khiển biểu mẫu chỉ với một dòng CSS:
- Nó hoạt động với các điều khiển biểu mẫu cụ thể
Trước khi bạn thực hiện thêm màu nhấn vào tất cả mọi thứ, điều đáng chú ý là bốn điều khiển hình thức cụ thể hỗ trợ thuộc tính accent-color:
Hộp kiểm (____10)
Mỗi trình duyệt có cách tính cách sử dụng màu gì. Bản demo này trên Glitch cho thấy một loạt các điều khiển hộp kiểm với nhiều màu nhấn khác nhau. Xem nó trong một trình duyệt hỗ trợ accent-color để xem cách trình duyệt đó kết hợp màu UI với các màu có giọng khác nhau.
Và, nếu chúng ta có màu nhấn mà chúng ta yêu thích nhưng nó chỉ làm việc với sự lựa chọn màu UI của trình duyệt, chúng ta có thể tiếp cận với thuộc tính input { accent-color: auto; display: block; width: 30px; height: 30px; } input.custom { accent-color: rebeccapurple; } 0 để ghi đè lên nó.
Buuuuuut, bạn có thể không muốn đặt câu hỏi về sự lựa chọn của trình duyệt ngay cả khi nó kết thúc một chút không nhất quán giữa các trình duyệt. Điều đó rất nhiều để tung hứng và bạn có thể gây hại nhiều hơn cho khả năng tiếp cận của UI hơn là tốt.
Trình duyệt sẽ không ghi đè accent-color ở chế độ tối như đôi khi trong các tình huống khác.
Một cách tiếp cận khác là bắt buộc cho các điều khiển hình thức khác
Một lần nữa, chỉ có một vài điều khiển biểu mẫu hiện đang hỗ trợ màu nhấn. Điều đó có nghĩa là chúng ta vẫn cần dùng đến các phương pháp tiếp cận hack truyền thống để tạo kiểu cho các loại điều khiển hình thức khác. Nhưng, hey, Adam Argyle và Joey Arhar có lưng của bạn với một đoạn trích đẹp giúp mang lại màu nhấn cho các điều khiển hình thức khác cũng như các dấu hiệu danh sách, lựa chọn và trọng tâm có thể nhìn thấy:
html { --brand: hotpink; scrollbar-color: hotpink Canvas; } :root { accent-color: var(--brand); } :focus-visible { outline-color: var(--brand); } ::selection { background-color: var(--brand); } ::marker { color: var(--brand); } :is( ::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button ) { color: var(--brand); }Hỗ trợ trình duyệt
Không | 93 | 92 | 93 | 15.4 | 79 |
15.4 | 104 | 101 | 104 | Không |
iOS safari
Android chrome
Android Firefox
Trình duyệt Android
- Opera Mobile
- Nguồn: Caniuse
- Video: accent-color trên ShopTalk
- Chris và Dave thể hiện không chỉ là những điều cơ bản của accent-color, mà còn làm thế nào nó có thể được sử dụng để viết các CSS gọn gàng hơn, tài khoản cho các bảng màu và thậm chí một số thủ thuật khó có thể thực hiện được nếu không có nó.
- đọc thêm
- CSS Accent-Color (Web.DEV)