Màu nhấn CSS

Đưa màu thương hiệu của bạn vào các mục nhập biểu mẫu HTML tích hợp bằng một dòng mã.

Adam Argyle

Joey Arhar

Các thành phần biểu mẫu HTML hiện nay khó tuỳ chỉnh. Bạn có cảm giác như phải lựa chọn giữa một số ít kiểu tuỳ chỉnh hoặc không có kiểu tuỳ chỉnh nào, hoặc đặt lại kiểu nhập và xây dựng nó từ đầu. Việc tạo dựng từ đầu sẽ tốn nhiều công sức hơn dự kiến. Điều này cũng có thể dẫn đến việc quên các kiểu cho các trạng thái phần tử (không xác định, tôi đang xem xét bạn) và mất các tính năng hỗ trợ tiếp cận tích hợp sẵn. Để tái tạo toàn bộ những gì mà trình duyệt cung cấp có thể tốn nhiều công sức hơn bạn mong đợi.

accent-color: hotpink;

CSS accent-color trong Thông số kỹ thuật về giao diện người dùng CSS sẵn sàng phủ màu các thành phần bằng một dòng CSS, giúp bạn không phải tuỳ chỉnh các thành phần khác bằng cách cung cấp cách đưa thương hiệu của bạn vào các thành phần.

Thuộc tính accent-color cũng hoạt động với color-scheme, cho phép tác giả phủ màu cả thành phần sáng lẫn tối. Trong ví dụ sau, người dùng có một giao diện tối đang hoạt động, trang sử dụng color-scheme: light dark và sử dụng cùng một accent-color: hotpink cho các chế độ điều khiển phủ màu hotpink theo chủ đề tối.

Thành phần được hỗ trợ

Hiện tại, chỉ có 4 phần tử được phủ màu thông qua thuộc tính accent-color: hộp đánh dấu, radio, dải_ô và tiến trình. Bạn có thể xem trước từng màu tại đây https://accent-color.glitch.me bằng bảng phối màu sáng và tối.

Hộp đánh dấu

Đài

Phạm vi

Tiến độ

Đảm bảo độ tương phản

Để ngăn các phần tử hiện có không truy cập được, các trình duyệt có accent-color cần xác định màu tương phản đủ điều kiện để dùng cùng với dấu tuỳ chỉnh. Dưới đây là ảnh chụp màn hình minh hoạ sự khác biệt giữa Chrome 94 (bên trái) và Firefox 92 Nightly (bên phải) trong thuật toán:

Điều quan trọng nhất cần lưu ý là tin tưởng trình duyệt. Cung cấp màu sắc của thương hiệu và tin tưởng rằng màu sắc đó sẽ đưa ra quyết định sáng suốt cho bạn.

Bổ sung: Phủ màu khác

Có thể bạn đang thắc mắc làm cách nào để phủ nhiều hơn 4 thành phần biểu mẫu này? Dưới đây là một hộp cát tối thiểu có phủ màu:

• vòng lấy nét
• phần đánh dấu văn bản được chọn
• liệt kê điểm đánh dấu
• chỉ báo mũi tên (chỉ dành cho Webkit)
• ngón cái của thanh cuộn (chỉ có trong Firefox)

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);
}

Tương lai tiềm năng

Thông số kỹ thuật này không giới hạn việc áp dụng accent-color cho 4 phần tử nêu trong bài viết này, chúng tôi có thể bổ sung thêm tính năng hỗ trợ sau. Bạn có thể làm nổi bật các thành phần như <option> đã chọn trong <select> bằng accent-color.

Bạn có muốn phủ màu nào khác trên web không? Tweet @argyleink bằng bộ chọn của bạn và bộ chọn đó có thể được thêm vào bài viết này!