HTML CSS thả xuống nhiều lựa chọn
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.
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
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
[/code]CSS / SCSS
[code language=”css”]
. biểu mẫu {
// Đặt lại mặc định Đã chọn. kiểu js
. đã chọn-container {
cỡ chữ. rem[16];
// Xóa đường viền và bóng hộp
. được chọn đơn,
. chọn-thả {
đường viền. none;
bán kính đường viền. 0;
hộp-bóng. không;
}
}
// Đặt lại kiểu hiện hoạt
. đã chọn-container-hoạt động {
// Xóa đường viền và bóng hộp
&. chọn-với-thả. được chọn đơn,
. lựa chọn-lựa chọn {
đường viền. none;
bán kính đường viền. 0;
hộp-bóng. không;
}
kết quả đã chọn {
// Xóa độ dốc và đặt màu nổi bật
. {
nền được đánh dấu. $color-blue;
}
}
}
}
[/code]
JS
[code language=”js”]
/**
* Được chọn. Nhiều cửa sổ thả xuống
*/
. WDS_Chosen_Multiple_Dropdown = {};
[ function[ window, $, that ] {
// Hàm tạo.
đó. init = function[] {
that. bộ đệm[];
nếu [ mà. đáp ứng Yêu cầu ] {
điều đó. bindEvents[];
}
};
// Cache tất cả mọi thứ.
đó. cache = function[] {
that. $c = {
cửa sổ. $[cửa sổ],
trình đơn thả xuống. $['. thả xuống' ],
};
};
// Kết hợp tất cả các sự kiện.
đó. bindEvents = function[] {
that. $c. cửa sổ. bật ['tải', cái đó. applyChosen ];
};
// Chúng tôi có đáp ứng các yêu cầu không?
điều đó. đáp ứngYêu cầu = function[] {
return that. $c. theDropdown. độ dài;
};
// Áp dụng lựa chọn. thư viện js vào danh sách thả xuống.
// https. //thu hoạchthq. github. io/đã chọn/tùy chọn. html
cái đó. applyChosen = function[] {
that. $c. theDropdown. đã chọn[{
inherit_select_classes. true,
chiều rộng. ‘300px’,
}];
};
// Tương tác.
$[ mà. init ];
}][ cửa sổ, jQuery, cửa sổ. WDS_Chosen_Multiple_Dropdown ];
[/code]
Nhiều lựa chọn với danh sách thả xuống
Xem cây bút được chọn. Menu thả xuống nhiều lựa chọn của WebDevStudios
[@webdevstudios] trên CodePen.
Một plugin đa lựa chọn JavaScript vani biến phần tử đa lựa chọn thông thường thành đầu vào thẻ thân thiện với người dùng
Người dùng được phép chọn nhiều tùy chọn từ menu thả xuống chọn. Nhấp vào nút 'X' để xóa tùy chọn đã chọn
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
that includes a class called select-multiple:
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
wrapper as well as the disabled attribute on the itself. For completeness, both the multiple and standard are shown below:
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