Giờ đây, bạn có thể tuỳ chỉnh phần tử <select> bằng CSS

Adam Argyle

Ngày phát hành: 24 tháng 3 năm 2025

Kể từ Chrome 135, nhà phát triển và nhà thiết kế web cuối cùng cũng có thể hợp nhất trên một phần tử <select> có thể truy cập, được chuẩn hoá và có thể tạo kiểu CSS trên web. Quá trình này đã diễn ra trong nhiều năm, với nhiều giờ làm việc kỹ thuật và cộng tác về thông số kỹ thuật. Kết quả là một thành phần vô cùng phong phú và mạnh mẽ, không bị lỗi trong các trình duyệt cũ.

Dưới đây là video về các lựa chọn tuỳ chỉnh sử dụng các tính năng mới này:

Giới thiệu các bản minh hoạ của Una, Brecht và Adam.

Nếu theo dõi sát sao, bạn sẽ nhận thấy một số tên thông số và tính năng đã thay đổi kể từ khi Una yêu cầu ý kiến phản hồi của cộng đồng. May mắn thay, nếu bạn đã làm theo bài đăng đó và quan tâm đến những điểm thay đổi, thì Una cũng có thể giúp bạn.

Ngoài ra, còn có tài liệu mới trên MDN về tính năng chọn tuỳ chỉnh, chứa đầy thông tin chi tiết.

Giới thiệu về appearance: base-select

Thuộc tính CSS mới appearance: base-select đặt phần tử <select> vào trạng thái mới, có thể định cấu hình và tạo kiểu, thường được gọi là kiểu "cơ sở":

.custom-select {
  &, &::picker(select) {
    appearance: base-select;    
  }
}

Việc sử dụng base-select mở khoá một số tính năng và hành vi mới:

Việc sử dụng base-select mất một số tính năng và hành vi:

  • <select> không hiển thị bên ngoài ngăn trình duyệt.
  • Loại này không kích hoạt các thành phần hệ điều hành di động tích hợp.
  • <select> sẽ ngừng lấy chiều rộng của <option> dài nhất.

<select> hiện có thể bao gồm nội dung HTML đa dạng thức

Trước khi bạn có thể tuỳ chỉnh <select>, nếu bạn đặt những thứ như hình ảnh hoặc SVG vào phần tử <option>, trình duyệt sẽ bỏ qua các phần tử đó.

Hãy xem xét đoạn mã HTML sau đây, trình duyệt sẽ đọc đoạn mã đó như khi bạn tạo:

<select class="custom-select">
  <option>
    <svg aria-hidden>…</svg>
    <span>HTML</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>CSS</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>JavaScript</span>
  </option>
  <option>
    <svg aria-hidden>…</svg>
    <span>WASM</span>
  </option>
</select>

Tuy nhiên, DOM được sử dụng sẽ không bao gồm <svg>:

<select class="custom-select">
  <option>
    <span>HTML</span>
  </option>
  <option>
    <span>CSS</span>
  </option>
  <option>
    <span>JavaScript</span>
  </option>
  <option>
    <span>WASM</span>
  </option>
</select>

Dưới đây là (từ trái sang phải) Chrome, Safari và Firefox hiển thị HTML trước đó. Nếu trình duyệt hỗ trợ appearance: base-select thì SVG sẽ xuất hiện trong tuỳ chọn, nếu không thì sẽ không xuất hiện.

Chrome, Safari và Firefox hiển thị kết quả kết xuất một phần tử chọn có SVG bên trong. Chrome hiển thị hình ảnh, còn Safari và Firefox hiển thị như thể không có hình ảnh nào.
Thử trong Codepen này.

Có nguy cơ làm hỏng các trang web hiện có bằng lựa chọn có thể tuỳ chỉnh do các thay đổi đối với trình phân tích cú pháp. Chrome có các tính năng đằng sau thử nghiệm Finch trong trường hợp cần tắt thử nghiệm theo cách khẩn cấp. Nếu mọi thứ diễn ra suôn sẻ, thử nghiệm sẽ kết thúc và mã sẽ được gửi vĩnh viễn vào nguồn.

Có thể tuỳ chỉnh hoàn toàn

Mọi phần của base-select đều có thể được hoán đổi, tuỳ chỉnh và tạo ảnh động. Dưới đây là một bản minh hoạ sử dụng mọi tính năng mới để tạo ra các trải nghiệm chọn lọc dễ nhận biết và có ý nghĩa.

4 cách trình bày khác nhau của một phần tử được chọn sẽ xuất hiện. Nút đầu tiên có một chấm chỉ báo trạng thái màu xanh lục, với nhãn là bật. Trang tiếp theo hiển thị hình đại diện bên cạnh các tuỳ chọn. Thứ ba là bộ chọn không gian màu có nhãn tuỳ chỉnh được tích hợp sẵn trong bộ chọn. Cột cuối cùng cho phép bạn chọn trạng thái bản nháp hoặc đã xuất bản.
Thử trong Codepen này.

Bạn có thể tìm thấy nhiều ví dụ khác trong phần tài nguyên ở cuối bài đăng này.

Giao diện JavaScript không thay đổi

Không có rủi ro nào đối với các hoạt động tương tác hiện có của bạn với JavaScript bằng phần tử <select>.

Tuy nhiên, nếu bắt đầu thêm HTML đa dạng thức vào các phần tử <option>, bạn nên kiểm thử các giá trị đã chọn vì trình duyệt vẫn phân tích cú pháp và bỏ qua hình ảnh cũng như SVG. Tuy nhiên, logic đã thay đổi để xác định chuỗi nội dung đã chọn và tuỳ thuộc vào các tuỳ chọn bạn có, bạn có thể cần điều chỉnh.

Nếu đang sử dụng thuộc tính value trên <option>, bạn không cần lo lắng.

Tài nguyên

Chrome là trình duyệt đầu tiên triển khai base-select, nhưng mọi trình duyệt đều tham gia vào quy cách và vẫn còn nhiều phần tử "cơ sở" chưa hoàn tất. Đây mới chỉ là bước khởi đầu.

Hãy chú ý theo dõi vì chúng tôi sẽ tiếp tục bổ sung hướng dẫn, ví dụ và tài nguyên về cách tuỳ chỉnh một số phần tử. Trong thời gian chờ đợi, hãy xem các đường liên kết sau đây để biết thêm thông tin.

Xin cảm ơn đặc biệt tất cả những người đã góp phần vào sự kiện này!