Một nhược điểm lớn của việc sử dụng phương pháp này là do các cách thực hiện khác nhau trên cả Windows và iOS và vì bạn phải thông báo cho người dùng rằng có nhiều lựa chọn nên bạn nên sử dụng các hộp kiểm thay thế
In this series on Web Forms, we’ve been learning how to create and style common form controls. In the last installment, we learned how to customize the standard element. As described there, selects come in a second flavor, which allows a user to select more than one option. It appears as a list, without a drop-down component:
This installment will cover the creation and customizing of multi-select lists as well as how to disable elements.
Tuy nhiên, trước khi chúng ta tiếp tục, bạn có thể muốn làm mới bộ nhớ của mình bằng cách xem lại các bài viết trước trong loạt bài này
- Cách xây dựng biểu mẫu web trong HTML
- Xây dựng biểu mẫu web trong HTML. Phần 2
- Styling Form Controls với CSS – Phần 3
- CSS cho Nhãn, Nút và Tương tác Biểu mẫu – Phần 4
- Styling Radio Buttons và Checkboxes trong HTML Forms – Phần 5
- Tạo kiểu cho Standard Select bằng CSS và HTML – Phần 6
Tạo một danh sách nhiều lựa chọn trong CSS
From an HTML perspective, all you have to do to turn a standard element into on that allows a user to select more than one option is to add the multiple attribute. For customization purposes, we’ll wrap the within a
Multiple SelectMouse 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
sử dụng của chúng tôi. vô hiệu hóa lựa chọn, chúng ta có thể thay đổi giao diện của lựa chọn để mang lại cho nó giao diện “chuyển sang màu xám”
.select-disabled { cursor: not-allowed; background-color: #eee; background-image: linear-gradient[to top, #ddd, #eee 33%]; }
Khi một người di con trỏ qua lựa chọn bị vô hiệu hóa, nó sẽ biến thành con trỏ "không được phép", là một vòng tròn màu đỏ có một đường kẻ xuyên qua, giống như biểu trưng của Ghost Busters
Behind the scenes, the disabled attribute that we added to the tag makes the control unresponsive to all user interactions.
Bạn sẽ tìm thấy bản demo cho hướng dẫn này trên codepen. io
Phần kết luận
Trong phần này của loạt bài Xây dựng biểu mẫu web bằng HTML, chúng ta đã trải qua quá trình tạo và tùy chỉnh danh sách nhiều lựa chọn cũng như tìm hiểu cách tắt các thành phần. Trong bài viết tiếp theo và cũng là bài viết cuối cùng của loạt bài này, chúng ta sẽ chuyển hướng bằng cách tích hợp JavaScript vào một biểu mẫu HTML để làm cho nó có tính tương tác cao hơn