::picker-icon

Cú pháp

::picker-icon {
  /* ... */
}

Mô tả

Phần tử giả ::picker-icon nhắm vào biểu tượng picker của các điều khiển biểu mẫu, tức là biểu tượng được hiển thị trên nút điều khiển. Nó chỉ có thể nhắm vào khi phần tử gốc có picker và có giao diện cơ sở được đặt trên nó thông qua giá trị base-select của thuộc tính appearance. Hộp được tạo ra của nó xuất hiện sau bất kỳ hộp nào được tạo ra bởi phần tử giả ::after, với biểu tượng được chỉ định trong stylesheet mặc định của trình duyệt; bạn có thể tùy chỉnh nó bằng thuộc tính content.

Bộ chọn ::picker-icon có thể được dùng để chọn mũi tên hướng xuống ở phía inline-end của phần tử select có thể tùy chỉnh. Điều này hữu ích ví dụ nếu bạn muốn tùy chỉnh màu sắc hoặc kích thước của biểu tượng, sử dụng biểu tượng khác (bằng content hoặc SVG), hoặc tạo hiệu ứng khi picker được mở và đóng.

Chọn biểu tượng picker <select> có thể tùy chỉnh là trường hợp sử dụng duy nhất hiện tại cho ::picker-icon, nhưng có thể có thêm trong tương lai.

Ví dụ

Tạo hiệu ứng cho biểu tượng picker

Để bật chức năng select có thể tùy chỉnh, phần tử <select> và picker của nó đều cần có giá trị appearance là base-select:

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

Bạn có thể, ví dụ, nhắm vào ::picker-icon và đặt cho nó color tùy chỉnh và transition để các thay đổi đối với thuộc tính rotate của nó được tạo hiệu ứng mượt mà:

select::picker-icon {
  color: #999999;
  transition: 0.4s rotate;
}

Trong quy tắc tiếp theo, ::picker-icon được kết hợp với lớp giả :open — nhắm vào biểu tượng chỉ khi picker đang mở — chuyển đổi nó sang giá trị rotate là 180deg khi <select> được mở.

select:open::picker-icon {
  rotate: 180deg;
}

Xem Tạo kiểu cho biểu tượng picker để biết ví dụ đầy đủ sử dụng mã này, cùng với ví dụ trực tiếp.

Thông số kỹ thuật

Tương thích trình duyệt

Xem thêm

• <select>, <option>, <optgroup>, <label>, <button>, <selectedcontent>
• appearance
• ::picker(select), ::checkmark
• :open, :checked
• Phần tử select có thể tùy chỉnh