Dropdown lists are one of the most flexible elements in HTML. It is similar to that of the radio input, that is, only one item can be selected from a group of items by default. However, when the multiple attribute is used with the element, we can enable the selection of multiple options from the list. The multiple attribute is a boolean attribute that specifies whether multiple options can be selected at once.

Nội dung chính Show

• Nhiều lựa chọn với danh sách thả xuống
• Tạo một danh sách nhiều lựa chọn trong CSS
• Chọn kiểu dáng chung trong CSS
• Đặt viền tiêu điểm
• Vô hiệu hóa lựa chọn
• Phần kết luận

Quá trình chọn nhiều tùy chọn khác nhau trong các hệ điều hành và trình duyệt khác nhau như được đề cập bên dưới

• các cửa sổ. Chúng ta cần giữ nút CTRL để chọn nhiều tùy chọn
• Mac. Chúng ta cần nhấn giữ nút lệnh để chọn nhiều tùy chọn

Lưu ý rằng, do các cách khác nhau để tiếp cận vấn đề này và vì người ta phải thông báo cho người dùng rằng có nhiều lựa chọn, nên việc sử dụng hộp kiểm sẽ thân thiện hơn với người dùng

Nhiều lựa chọn thả xuống. Người dùng được phép chọn nhiều tùy chọn từ menu thả xuống chọn. Đoạn trích tuyệt vời này được thiết kế bởi WebDevStudios

Nhiều lựa chọn thả xuống

HTML

[code language=”html”]

Chosen: Multiple Dropdown

A simple dropdown using Chosen.js. Find out more, by reading the Chosen options API.

Click to select an option

First option
Second option
Third option
Fourth option
Fifth option

Multiple Select

  
    Mouse In A Maze
    Private Life
    Suspended Animation
    No Quarter
    11:11 Ultimate Edition
    Ultraviolence
    The Core (with outro solo)
    Telekinetic Killer
    All of the above
    None of the above
  
  

Đây là danh sách bài hát của chúng tôi không có phong cách nào

Chọn kiểu dáng chung trong CSS

All of the styles that we employed previously to customize the standard element are still applicable here. For reference, here are those styles using Sassy CSS (SCSS):

:root {
  --select-border: #393939;
  --select-focus: #101484;
  --select-arrow: var(--select-border);
}

select {
  // styles reset, including removing the default dropdown arrow
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: transparent;
  border: none;
  padding: 0 1em 0 0;
  margin: 0;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  cursor: inherit;
  line-height: inherit;

  // Stack above custom arrow
  z-index: 1;

  // Remove focus outline
  outline: none;
}

.select {
  display: grid;
  grid-template-areas: "select";
  align-items: center;
  position: relative;

  select,
  &::after {
    grid-area: select;
  }

  min-width: 15ch;
  max-width: 30ch;
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 0.25em 0.5em;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1.1;

  // Optional styles
  // remove for transparency
  background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);

  // Custom arrow
  &::after {
    content: "";
    justify-self: end;
    width: 0.8em;
    height: 0.5em;
    background-color: var(--select-arrow);
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
  }
}

Chúng ta có thể thấy tác dụng của chúng đối với đa lựa chọn bên dưới

 

Nhìn chung nó trông khá tốt. Vấn đề duy nhất là các tùy chọn đã chọn không mở rộng đến thanh cuộn dọc

Vì vậy, hãy khắc phục điều đó ngay bây giờ bằng cách đặt quyền đệm trong quy tắc mới nhắm mục tiêu cụ thể đến nhiều lựa chọn

select[multiple] {
  padding-right: 0;
  height: 7rem;
}

Chiều cao xác định có bao nhiêu mục hiển thị trong danh sách cùng một lúc mà không cần cuộn. Safari sẽ không hiển thị các tùy chọn một phần, trong khi Firefox, Chrome và Microsoft Edge thì có. Bạn có thể thấy một phần tùy chọn trong Edge tại đây

 

Đặt viền tiêu điểm

Having removed the default

element using the CSS appearance attribute, we now have to set the focus border ourselves. As we did last time, we’ll employ a CSS variable for the color:

select:focus + .focus {
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 2px solid var(--select-focus);
  border-radius: inherit;
}

Bây giờ, tab vào danh sách đa lựa chọn sẽ hiển thị điều này

Ngoài ra còn có một đường viền xung quanh tùy chọn đầu tiên (không phải do chúng tôi thêm vào) để người dùng có thể điều hướng qua các mục bằng các phím mũi tên LÊN và XUỐNG

Vô hiệu hóa lựa chọn

The handling of disabled selects must also fall upon our shoulders. To do that, we’ll add the select-disabled class to the

.select-disabled {
  cursor: not-allowed;
  background-color: #eee;
  background-image: linear-gradient(to top, #ddd, #eee 33%);
}