`<select>` giờ đây có thể tùy biến bằng CSS

• Từ Chrome 135, bắt đầu hỗ trợ tính năng mới cho phép tùy biến bằng CSS đối với phần tử <select> mà vẫn duy trì tiêu chuẩn trợ năng
• Sau nhiều năm điều chỉnh đặc tả và phát triển, tính năng này được cung cấp như một thành phần mạnh mẽ không bị hỏng trên cả các trình duyệt cũ
• Cũng có thể chứa nội dung HTML, và với việc bổ sung appearance: base-select, nay có thể thực hiện nhiều kiểu tùy biến như animation, style, v.v.

Giới thiệu appearance: base-select

• Thuộc tính CSS mới appearance: base-select đưa phần tử <select> vào một trạng thái mới có thể tùy biến

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

• Những tính năng mới xuất hiện khi dùng base-select

  • Thay đổi cách bộ phân tích HTML của trình duyệt xử lý nội dung bên trong <select>
  • Thay đổi cách render và cấu trúc nội bộ
  • Cung cấp các phần nội bộ và trạng thái mới
  • Cung cấp thiết kế mặc định ở mức tối thiểu, tối ưu cho việc tùy biến
  • Tùy chọn đang hiển thị xuất hiện ở lớp trên cùng như một popover
  • Có thể điều khiển vị trí tùy chọn bằng anchor()

• Những tính năng biến mất khi dùng base-select

  • Không thể render <select> ra bên ngoài cửa sổ trình duyệt
  • Không gọi giao diện chọn mặc định của hệ điều hành di động
  • Không phản ánh chiều rộng của <option> dài nhất

Có thể đưa nội dung HTML vào <select>

• Trước đây, khi chèn hình ảnh hoặc SVG vào trong <option>, trình duyệt sẽ bỏ qua
• Khi áp dụng appearance: base-select, HTML sẽ được render nguyên trạng
• Trong Chrome, các tùy chọn có chứa SVG sẽ hiển thị, nhưng Safari, Firefox và các trình duyệt khác chưa hỗ trợ
• Demo CodePen: Liên kết thực hành
• Tính năng này được đưa vào dưới dạng thử nghiệm Finch và có thể bị dừng nếu cần

Có thể tùy biến hoàn toàn

• Mọi thành phần của base-select đều có thể được thay thế, gắn animation và áp dụng style
• Có thể xây dựng giao diện chọn mang nhiều ý nghĩa thông qua các thiết kế đa dạng
• Ví dụ gồm có: hiển thị trạng thái, tùy chọn kèm avatar, bộ chọn màu, chọn trạng thái bài đăng, v.v.
• Demo CodePen: Liên kết thực hành

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

• Hành vi JavaScript hiện có đối với <select> vẫn được giữ nguyên
• Tuy nhiên, nếu đưa HTML vào <option>, cách phân tích giá trị đã chọn đã thay đổi nên cần kiểm thử
• Nếu dùng thuộc tính value thì không cần chỉnh sửa thêm

Tài liệu bổ sung

Tiêu chuẩn web

• Đặc tả Open UI Select
• Pull Request đặc tả HTML
• Chrome Intent to Ship

Tài liệu liên quan đến Chrome

• Bài viết yêu cầu và giải thích trên blog Chrome
• Kết quả phản hồi từ cộng đồng
• Sử dụng <hr> trong <select>
• Bài giải thích của Una / liên kết tổng hợp thay đổi
• Bộ sưu tập CodePen của Una

Tài liệu cộng đồng

• Bộ sưu tập CodePen của Brecht De Ruyte
• So sánh native vs custom select của CSS Tricks
• Triển khai <select> của Open Props UI
• Ví dụ custom select có áp dụng animation

Demo sử dụng <select> đã được tùy biến

• Demo của Una
• Demo của Brecht
• Demo của Adam

[GN⁺]

Ý kiến Hacker News

• Việc tôi hào hứng quá mức với tính năng này có lẽ cho thấy con người tôi từng là một lập trình viên web đầu những năm 2000. Đây là một tính năng rất hữu ích vì phần tử chọn cung cấp khả năng mà không thể tái tạo bằng HTML

  • Giờ chỉ cần bổ sung tiếp tự động hoàn thành và bộ chọn thẻ

• Trước khi tính năng này được hỗ trợ rộng rãi, nên dùng theo hướng cải tiến dần. Hiện tại theo caniuse.com thì mức hỗ trợ toàn cầu là 46%

  • Cần cẩn thận để không tạo ra trải nghiệm tệ cho người dùng trình duyệt chưa hỗ trợ
  • Điều quan trọng là không đưa thông tin hay chức năng quan trọng vào phần tạo kiểu mới

• Tôi rất vui khi thấy tính năng này được triển khai. Nó sẽ là một cải tiến lớn hơn nhiều so với các giải pháp thay thế hộp chọn tùy biến

• Tôi lo là nó không kích hoạt các thành phần gốc của hệ điều hành di động. Các thành phần gốc thì đáng tin cậy, dễ tiếp cận và phản hồi tốt

  • Thật tốt khi giao diện Android mở ra một cách đáng tin cậy. Điều này không chỉ áp dụng cho phần tử chọn mà còn cho cả nhập ngày/giờ

• Một số điều khiển tốt hơn là không nên tạo kiểu. Với thanh cuộn, chúng thường quá mỏng hoặc độ tương phản màu quá kém nên khó sử dụng

  • Phần tử chọn mặc định không phải điều khiển đẹp nhất, nhưng nó làm được việc

• Có vẻ như đây là điều mà các lập trình viên web đã chờ đợi suốt hàng chục năm. Nó có thể thay thế nhiều thư viện JS

  • Tôi không cài Chrome, nhưng tôi tò mò không biết trong video minh họa họ xử lý trường chọn nhiều mục như thế nào

• Giờ đã có thể tùy biến phần tử chọn bằng CSS trong các trình duyệt Chromium

  • Các tiêu chuẩn web đang ngày càng phức tạp hơn

• Có cung cấp liên kết tới lỗi trên Firefox

• Cứ tiếp tục thế này thì sớm muộn gì cũng sẽ đạt mức tương đương tính năng với VB6

• Vẫn tốt hơn các thư viện JS bị lỗi. Nhưng mối quan tâm chính là bố cục sẽ ra sao khi có nhiều tùy chọn

  • Việc nó không kích hoạt các thành phần gốc của hệ điều hành di động làm tôi thấy đáng ngại. Tôi tự hỏi bố cục sẽ như thế nào
  • Tùy chọn được hiển thị được định vị bằng anchor()
  • Dù còn mang tính thử nghiệm, nhưng có lẽ đây có thể là phần hay nhất. Nếu nó thực sự hoạt động trong CSS thì sẽ rất ấn tượng

[carnoxen]

Vậy là sẽ không còn cần đến <selectlist> nữa sao?

[deminoth]

Nói chuyện khác một chút, có vẻ trong Slackbot tiêu đề <select> không hiển thị nhỉ haha

[xguru]

Ôi T_T cái này tôi sẽ sửa sau.