<selectedcontent>: Phần tử hiển thị tùy chọn đã chọn
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Phần tử <selectedcontent> trong HTML được sử dụng bên trong phần tử <select> để hiển thị nội dung của <option> hiện đang được chọn trong <button> con đầu tiên của nó. Điều này cho phép bạn tạo kiểu cho tất cả các phần của phần tử <select>, được gọi là "customizable selects".
Thuộc tính
Phần tử này bao gồm các thuộc tính toàn cục.
Mô tả
Bạn sử dụng phần tử <selectedcontent> như con duy nhất của phần tử <button>, phần tử này phải là con đầu tiên của phần tử <select>. Bất kỳ phần tử <option> nào, con hợp lệ duy nhất khác của <select>, phải xuất hiện sau cặp <button> và <selectedcontent> lồng nhau.
<select>
<button>
<selectedcontent></selectedcontent>
</button>
<option></option>
...
</select>
Cách <selectedcontent> hoạt động ở phía sau
Phần tử <selectedcontent> chứa bản sao nội dung của <option> hiện đang được chọn. Trình duyệt hiển thị bản sao này bằng cloneNode(). Khi <option> được chọn thay đổi, chẳng hạn trong sự kiện change, nội dung của <selectedcontent> được thay thế bằng bản sao của <option> mới được chọn. Việc biết về hành vi này rất quan trọng, đặc biệt khi làm việc với nội dung động.
Warning:
Vì trình duyệt chỉ cập nhật <selectedcontent> khi <option> được chọn thay đổi, bất kỳ sửa đổi động nào đối với nội dung của <option> đang được chọn sau khi <select> được hiển thị sẽ không được sao chép vào <selectedcontent>. Bạn cần phải cập nhật <selectedcontent> thủ công. Chú ý nếu bạn đang sử dụng bất kỳ framework JavaScript front-end phổ biến nào mà các phần tử <option> được cập nhật động sau lần hiển thị đầu tiên – kết quả có thể không khớp với những gì bạn mong đợi trong <selectedcontent>.
Tính bất hoạt của <selectedcontent>
Theo mặc định, bất kỳ <button> nào bên trong phần tử <select> đều bất hoạt (inert). Kết quả là, tất cả nội dung bên trong button đó—bao gồm cả <selectedcontent>—cũng bất hoạt.
Điều này có nghĩa là người dùng không thể tương tác hoặc focus vào nội dung bên trong <selectedcontent>.
Tạo kiểu nội dung của tùy chọn đã chọn bằng CSS
Bạn có thể nhắm vào nội dung của phần tử <option> hiện đang được chọn và tạo kiểu cho cách nó xuất hiện bên trong nút select. Tạo kiểu cho nút không ảnh hưởng đến kiểu của nội dung <option> đã được sao chép. Điều này cho phép bạn tùy chỉnh cách tùy chọn đã chọn xuất hiện trong nút, tách biệt với cách nó xuất hiện trong danh sách thả xuống.
Ví dụ: các phần tử <option> của bạn có thể chứa biểu tượng, hình ảnh, hoặc thậm chí video hiển thị đẹp trong danh sách thả xuống, nhưng có thể khiến <button> select tăng kích thước, trông lộn xộn và ảnh hưởng đến bố cục xung quanh. Bằng cách nhắm vào nội dung bên trong <selectedcontent>, bạn có thể ẩn các phần tử như hình ảnh trong nút, mà không ảnh hưởng đến cách chúng xuất hiện trong danh sách thả xuống, như được hiển thị trong đoạn mã sau:
selectedcontent img {
display: none;
}
Note:
Nếu các phần tử <button> và/hoặc <selectedcontent> không được bao gồm bên trong <select>, trình duyệt sẽ tạo một <button> ngầm định để hiển thị nội dung của <option> đã chọn. Nút dự phòng này không thể được nhắm đến bằng CSS sử dụng bộ chọn loại button hoặc selectedcontent.
Ví dụ
Bạn có thể xem ví dụ đầy đủ bao gồm phần tử <selectedcontent> trong hướng dẫn Customizable select elements của chúng tôi.
Tóm tắt kỹ thuật
| Danh mục nội dung | Không có |
|---|---|
| Nội dung được phép |
Phản chiếu nội dung từ <option> đang được chọn.
|
| Bỏ qua thẻ | Không có, cả thẻ mở và thẻ đóng đều bắt buộc. |
| Phần tử cha được phép |
Một phần tử <button> là con đầu tiên của phần tử <select>.
|
| Vai trò ARIA ngầm định | Không có |
| Vai trò ARIA được phép | Không có |
| Giao diện DOM | HTMLSelectedContentElement |
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| HTML # the-selectedcontent-element |
Tương thích trình duyệt
Xem thêm
- Phần tử
<select> - Phần tử
<option> - Phần tử
<optgroup> - Customizable select elements