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

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%);
}