Kiểu chọn mang thương hiệu

Tính năng web: Phần tử <select> có thể tuỳ chỉnh

API chọn tuỳ chỉnh cung cấp một cách khai báo, dựa trên CSS để tạo kiểu cho các phần tử <select> sao cho phù hợp hoàn hảo với hệ thống thiết kế của thương hiệu. Bằng cách chọn sử dụng appearance: base-select, bạn có thể truy cập vào DOM bóng nội bộ của phần tử chọn, cho phép bạn tạo kiểu cho nút, danh sách bộ chọn tuỳ chọn, biểu tượng mũi tên và chỉ báo dấu kiểm bằng các thuộc tính CSS tiêu chuẩn.

Trước đây, để có được một phần tử chọn mang đầy đủ đặc điểm thương hiệu, bạn phải tạo lại phần tử điều khiển từ đầu bằng JavaScript. Việc này thường làm hỏng tính năng hỗ trợ tiếp cận, thao tác bằng bàn phím và tích hợp biểu mẫu gốc. Với appearance: base-select, bạn sẽ có giao diện tuỳ chỉnh trong khi trình duyệt xử lý việc quản lý tiêu điểm, kết xuất lớp trên cùng và liên kết hỗ trợ tiếp cận.

Cách triển khai

Cách triển khai kiểu chọn theo thương hiệu:

  1. Chọn sử dụng tính năng tuỳ chỉnh: Áp dụng appearance: base-select cho cả phần tử <select> và phần tử giả ::picker(select) (nhắm đến danh sách thả xuống các tùy chọn).
  2. Cấu trúc nút tuỳ chỉnh (Không bắt buộc): Xác định phần tử <button> ngay bên trong <select> để thay thế trình kích hoạt mặc định. Sử dụng phần tử <selectedcontent> bên trong nút này để thể hiện văn bản hoặc nội dung của tuỳ chọn đang được chọn.
  3. Tạo kiểu cho danh sách bộ chọn: Sử dụng phần tử giả ::picker(select) để áp dụng kiểu chữ, màu nền, đường viền và bóng cho danh sách thả xuống. Trình duyệt sẽ hiển thị nội dung này ở lớp trên cùng, giúp giải quyết xung đột z-index.
  4. Tạo kiểu cho biểu tượng nội bộ:
    • Sử dụng select::picker-icon để tạo kiểu hoặc thay thế biểu tượng mũi tên.
    • Sử dụng option::checkmark để tạo kiểu cho chỉ báo dấu kiểm bên cạnh tuỳ chọn đang hoạt động.
  5. Tuỳ chọn kiểu: Áp dụng kiểu cho các phần tử <option> cho trạng thái di chuột, khoảng đệm và bố cục.

Mã ví dụ: Branded Courier Select

Ví dụ sau đây minh hoạ một lựa chọn tuỳ chỉnh được tạo kiểu bằng phông chữ đơn cách và đường viền nét đứt để phù hợp với tính thẩm mỹ của một thương hiệu "bưu kiện" cụ thể.

/* Enable customization for the select and its picker */
.brand-select,
.brand-select::picker(select) {
  appearance: base-select;
}

/* Style the visible trigger button */
.brand-select {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  color: #8b4513;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

/* Style the dropdown options list */
.brand-select::picker(select) {
  font-family: 'Courier New', monospace;
  background-color: #fffaf0;
  border: 2px dashed #8b4513;
  border-radius: 4px;
  padding: 0.5rem;
}

/* Customize internal part colors to match text */
.brand-select::picker-icon {
  color: #8b4513;
}

.brand-select option::checkmark {
  color: #8b4513;
}

/* Style individual options and hover effects */
.brand-select option {
  padding: 0.5rem;
  border-radius: 4px;
  color: #8b4513;
  cursor: pointer;
}

.brand-select option:hover {
  background-color: #fdf5e6;
}

<label for="preferences">Select shipping preference</label>
<select class="brand-select" id="preferences" name="preferences">
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option value="standard">Standard Shipping</option>
  <option value="express" selected>Express Shipping</option>
  <option value="overnight">Overnight Delivery</option>
</select>

Triển khai chiến lược và các phương pháp hay nhất

  • NÊN sử dụng appearance: base-select khi hệ thống thiết kế của bạn yêu cầu độ chính xác cao, tính nhất quán về hình ảnh trên tất cả các thành phần điều khiển biểu mẫu mà không thể đạt được bằng các chế độ ghi đè lựa chọn tiêu chuẩn trên nhiều trình duyệt.
  • KHÔNG sử dụng thuộc tính này nếu bạn dựa vào trải nghiệm bộ chọn gốc của hệ điều hành (ví dụ: bộ chọn con lăn chuột tiêu chuẩn trên thiết bị iOS). Khi chọn base-select, bạn sẽ chọn không sử dụng các thành phần điều khiển trên giao diện người dùng gốc trên thiết bị di động để ưu tiên các trình đơn lớp trên cùng được hiển thị trên web.
  • NÊN xác minh rằng độ tương phản màu đáp ứng các tiêu chuẩn WCAG. Bộ chọn có thể tuỳ chỉnh cho phép bạn đặt màu tuỳ ý, nhưng bạn có trách nhiệm đảm bảo văn bản vẫn dễ đọc trên nền tuỳ chỉnh.
  • Kiểm thử hành vi của bố cục. Việc đặt appearance: base-select sẽ xoá hành vi mặc định của trình duyệt là định cỡ lựa chọn dựa trên chiều rộng của lựa chọn dài nhất. Bạn có thể cần đặt chiều rộng cố định hoặc sử dụng các quy tắc ràng buộc về flex/grid để ngăn bố cục thay đổi.
  • Đảm bảo <select> của bạn có thuộc tính name và <label> được liên kết. Điều này đảm bảo rằng ngay cả khi có giao diện người dùng tuỳ chỉnh, thành phần này vẫn có thể truy cập được đối với trình đọc màn hình và hoạt động chính xác với các lượt gửi biểu mẫu chuẩn.
  • Sử dụng các thuộc tính value chuẩn cho các lựa chọn để đảm bảo việc gửi biểu mẫu hoạt động chính xác như trước.

Chiến lược dự phòng

Phương án dự phòng và khả năng hỗ trợ của trình duyệt cho <select> có thể tuỳ chỉnh

Đối với các trình duyệt chưa hỗ trợ appearance: base-select, phần tử <select> sẽ hạ cấp một cách linh hoạt xuống trình đơn thả xuống của hệ điều hành tiêu chuẩn.

  • Bỏ qua nội dung không phải văn bản: Các trình duyệt cũ loại bỏ thẻ HTML (như <svg> hoặc <div>) bên trong thẻ <option> và chỉ hiển thị các nút văn bản. Đảm bảo nội dung văn bản của <option> dễ đọc và có ý nghĩa riêng.
  • Xử lý cấu trúc HTML: Trình phân tích cú pháp chuẩn có thể bỏ qua các thẻ <button> và <selectedcontent> bên trong <select> hoặc coi các thẻ đó là không hợp lệ. Bạn không cần phải sử dụng các polyfill JavaScript nặng để cải tiến tăng dần nếu bạn xem văn bản chuẩn là một phương án dự phòng dễ đọc.
document.addEventListener("DOMContentLoaded", () => {
  // Check if browser supports base-select value
  if (!CSS.supports("appearance", "base-select")) {
    // Custom select overrides are not supported natively.
  }
});