::checkmark

Try it

<label for="pet-select">
  Select pet:
</label>
<br />
<select id="pet-select">
  <option value="cat">Cat</option>
  <option value="dog">Dog</option>
  <option value="chicken">
    Chicken
  </option>
</select>

option::checkmark {
  color: orange;
  font-size: 1.5rem;
}

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

select {
  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
}

::picker(select) {
  border: none;
}

option {
  border: 2px solid #dddddd;
  background: #eeeeee;
  padding: 10px;
}

option:first-of-type {
  border-radius: 8px 8px 0 0;
}

option:last-of-type {
  border-radius: 0 0 8px 8px;
}

option:nth-of-type(odd) {
  background: white;
}

option:not(option:last-of-type) {
  border-bottom: none;
}

Cú pháp

::checkmark {
  /* ... */
}

Mô tả

Phần tử giả ::checkmark nhắm vào dấu kiểm được đặt bên trong <option> hiện đang được chọn của một phần tử select có thể tùy chỉnh.

Nó chỉ có thể nhắm tới khi phần tử gốc có picker và đã được đặt kiểu nền 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 trước bất kỳ hộp nào được tạo ra bởi phần tử giả ::before. Biểu tượng có thể được tùy chỉnh bằng thuộc tính content.

Bộ chọn ::checkmark hữu ích ví dụ khi bạn muốn ẩn dấu kiểm, sử dụng biểu tượng tùy chỉnh, hoặc điều chỉnh vị trí hiển thị của dấu kiểm bên trong các phần tử <option>.

Ví dụ

Tùy chỉnh dấu kiểm

Để kích hoạt chức năng select có thể tùy chỉnh, cả 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;
}

Giả sử flexbox đang được dùng để bố cục các phần tử <option> (điều này đúng trong các triển khai hiện tại của select có thể tùy chỉnh), bạn có thể di chuyển dấu kiểm từ đầu hàng sang cuối bằng cách đặt giá trị order lớn hơn 0 trên nó, và căn chỉnh nó về cuối hàng bằng cách dùng giá trị auto của margin-left (xem Căn chỉnh và lề tự động).

Giá trị của thuộc tính content cũng có thể được đặt thành một emoji khác để thay đổi biểu tượng hiển thị.

option::checkmark {
  order: 1;
  margin-left: auto;
  content: "☑️";
}

Xem Tạo kiểu cho dấu kiểm chọn hiện tại để có ví dụ đầy đủ sử dụng mã này, cùng với ví dụ trực tiếp.

Đặc tả

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

Xem thêm

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