CSS thả xuống đa lựa chọn tùy chỉnh

Stephanie Eckles. [0. 00] Đây là trạng thái hiện tại của các lựa chọn của chúng tôi trên các trình duyệt Chrome, Firefox và Safari. Nhìn lại HTML mà chúng tôi đã tạo cho đến nay, chúng tôi đã gói tất cả các lựa chọn gốc trong một div với một lớp trường biểu mẫu

[0. 14] Bước đầu tiên của chúng tôi là thêm một lớp lựa chọn bổ sung để chúng tôi biết sự khác biệt giữa trường biểu mẫu có thể bao bọc một mục nhập văn bản thay thế. Tôi sẽ tiếp tục và thêm lớp chọn vào tất cả các trường biểu mẫu ở đây. Sau khi hoàn thành việc đó, chúng tôi sẽ nhận xét các phiên bản bị vô hiệu hóa, vì chúng tôi sẽ giải quyết những phiên bản đó trong bài học tiếp theo

[0. 34] Bởi vì chúng tôi đã thêm lớp chọn đó vào trường biểu mẫu, nên chúng tôi vẫn coi nó là một phần của thành phần trường biểu mẫu của chúng tôi. Chúng tôi sẽ bắt đầu quy tắc của mình bằng cách xác định phạm vi lớp trường biểu mẫu cho các phần tử cũng áp dụng lớp chọn

[0. 49] Nhìn lại các kiểu trình duyệt của chúng tôi, một lời nhắc nhở rằng tiến trình của chúng tôi cho đến nay chỉ đơn giản là đặt lại các kiểu đã chọn. Chúng tôi đã xóa giao diện gốc do trình duyệt áp dụng. Một vài điều chúng tôi sẽ tìm cách đạt được là căn chỉnh chính xác lựa chọn gốc và cũng tạo mũi tên thả xuống tùy chỉnh của riêng chúng tôi sử dụng hệ thống chủ đề của chúng tôi

[1. 11] Điều đầu tiên chúng ta sẽ giải quyết là vị trí của vùng chọn gốc trong trình bao bọc trực quan của trường biểu mẫu. Bạn có thể thấy rằng ngay bây giờ nó đang hơi hướng lên trên. Để giải quyết vấn đề này, chúng tôi sẽ đưa vào CSS Grid. Chúng tôi sẽ xác định hiển thị. lưới và đặt các mục căn chỉnh. căn giữa để căn giữa nó theo chiều dọc trong không gian

[1. 34] Tiếp theo, tôi cảm thấy thật tuyệt khi thêm một chút điểm khác biệt trực quan vào lựa chọn dưới dạng yếu tố tương tác có thể nhấp. Một sở thích cá nhân là thêm một chút chuyển màu nền và khi lưu, bạn có thể thấy nó có màu mờ dần từ trắng đến rất, rất nhạt chỉ mang lại cho nó một chút kích thước

[1. 53] Khi đã hoàn thành các phần cơ bản đó, bước tiếp theo của chúng tôi là thêm một mũi tên thả xuống tùy chỉnh. Có một vài cách mà chúng ta có thể thực hiện điều này. Một phương pháp phổ biến trước đây là sử dụng thủ thuật được gọi là thủ thuật viền CSS để tạo mũi tên hoặc thêm hình nền trên phần tử giả thực sự là SVG

[2. 15] Chúng tôi sẽ sử dụng một phương pháp hiện đại hơn gọi là clip-path. Điều đầu tiên chúng ta phải làm là tạo phần tử giả sẽ giữ nó và để làm điều này, chúng ta sẽ sử dụng phần tử giả sau

[2. 26] Chúng tôi chỉ cần danh sách thả xuống trên một lần chọn, không phải nhiều lần chọn. Khi chúng tôi thực hiện các kiểu thiết lập lại biểu mẫu của mình, chúng tôi đã thêm một lớp mà chúng tôi có thể sử dụng trong bộ chọn không để loại trừ nó, đó là lớp select --multiple vì vậy bây giờ mũi tên thả xuống của chúng tôi sẽ chỉ nằm trong phạm vi chọn duy nhất

[2. 45] Tất cả các phần tử giả đều cần thuộc tính nội dung. Chúng tôi cũng sẽ chỉ thêm chiều rộng và chiều cao và màu nền mặc định của chúng tôi chỉ để hình dung vị trí này sẽ được đặt

[2. 55] Khi lưu, bạn sẽ thấy rằng nó đã xuất hiện bên dưới lựa chọn gốc. Lý do là, hành vi mặc định của display. lưới là sắp xếp trẻ em theo hàng. Để giải quyết vấn đề này, chúng ta sẽ quay lại phần tử cha. Trước đây, bạn có thể đã sử dụng vị trí. tuyệt đối để khắc phục sự cố như thế này, nhưng vì chúng tôi đang sử dụng lưới nên chúng tôi có thể xác định một khu vực mẫu lưới duy nhất và chúng tôi sẽ sử dụng chúng tôi giống như một canvas được bản địa hóa để định vị trên đó. Chúng tôi sẽ gọi đây là lựa chọn

[3. 26] Tên ở đây là hoàn toàn cục bộ cho thành phần này, vì vậy nó có thể được đặt tên theo bất kỳ tên nào bạn muốn và nó chỉ áp dụng trong lớp này. Sau đó, chúng tôi sẽ xác định rằng cả phần tử chọn gốc cũng như phần tử sau của chúng tôi sẽ sử dụng vùng lưới chọn mới đó

[3. 42] Khi lưu, bạn đã có một chút điều chỉnh ở vị trí mà phần sau hiện xuất hiện phía trên lựa chọn gốc. Điều xảy ra ở đây là do chúng tôi đã đặt cả hai mục này trong cùng một vùng lưới, nên thứ tự xếp chồng DOM tự nhiên đã có hiệu lực và đó là lý do tại sao nó được đặt phía trên vùng chọn gốc.

[4. 01] Chúng tôi có thể giải quyết vị trí này bằng cách đi xuống phần tử sau của chúng tôi và sử dụng thuộc tính định vị lưới của justify-self để đặt nó ở cuối. Bạn có thể thấy nó hiện đã chuyển sang vị trí mà chúng tôi mong đợi là vị trí điển hình cho danh sách thả xuống của lựa chọn

[4. 16] Chúng tôi đã cung cấp cho nó các kích thước và chúng tôi đã cung cấp cho nó một màu sắc. Để hoàn thành việc định hình mũi tên thả xuống của chúng tôi, tôi đã đề cập rằng chúng tôi sẽ sử dụng clip-path. Chúng ta sẽ thêm quy tắc và sau đó thảo luận về cách thức hoạt động của quy tắc. Chúng tôi đang sử dụng clip-path với chức năng đa giác. Những gì nó đang làm là tạo các điểm để cắt chiều rộng phần tử

[4. 35] Nhìn vào mũi tên được tạo mà chúng ta hiện có, các điểm được tạo ra được đặt ở mức 100%, tạo ra nó ở ngoài cùng bên phải của phần tử cũng như %, giữ nó ở đầu phần tử, sau đó là 00%.

[4. 55] Lý do chúng tôi sử dụng clip-path là nó hoàn toàn có thể sử dụng được bằng cách sử dụng màu nền. Nếu bạn sử dụng một SVG, nó sẽ phải được đặt như một phần tử DOM bổ sung để hoàn toàn có thể sử dụng được và không phải điều chỉnh giá trị màu trong ảnh nền theo cách thủ công

[5. 14] Tôi nhận thấy rằng việc định kích thước các hình được tạo bằng clip-path sẽ dễ dàng hơn so với một phương pháp thay thế như hack đường viền cho hình tam giác

[5. 22] Điều quan trọng cần lưu ý là mũi tên chỉ là một chỉ báo trực quan. Do cách chúng tôi đang sử dụng định vị lưới, chúng tôi muốn đảm bảo rằng các lần nhấp vào thành phần mũi tên sẽ mở ra lựa chọn gốc, điều mà chúng hiện không có. Lý do là vì nó bao gồm lựa chọn bản địa của chúng tôi

[5. 38] Hãy đính kèm một số quy tắc cho lựa chọn gốc đó. Cách cổ điển để giải quyết vấn đề về thứ tự xếp chồng là với chỉ mục z, vì vậy chúng tôi sẽ áp dụng chỉ mục z là 1. Điều đó đã mang lại thành công lựa chọn gốc của chúng tôi trên mũi tên thả xuống được tạo của chúng tôi. Bây giờ chúng ta có thể nhấp vào bất kỳ đâu trên phần tử này để khởi chạy thành công danh sách thả xuống chọn gốc

[6. 01] Hãy quay lại và xem lại cách điều này hiện đang xuất hiện trên các trình duyệt. Bạn có thể thấy rằng chúng tôi có giao diện ban đầu nhất quán trên trường đã chọn. Bạn vẫn sẽ nhận được một chút khác biệt trong danh sách thả xuống xuất hiện. Hiện tại, không có cách nào để giải quyết sự khác biệt đó, nhưng đó là điều mà các nhà sản xuất trình duyệt hiện đang nghiên cứu.

[6. 23] Mặc dù chúng tôi đã loại trừ danh sách thả xuống của mình khỏi việc áp dụng cho nhiều lựa chọn của chúng tôi, nhưng vẫn có vấn đề là nó thừa hưởng thêm một chút phần đệm đó. Để giải quyết vấn đề đó trên phần tử chọn gốc, chúng ta có thể đính kèm vào bộ chọn thuộc tính để phát hiện khi nó là bội số và loại bỏ phần đệm bên phải đó và đặt nó thành. Bây giờ chúng ta thấy rằng lựa chọn của chúng ta trải dài theo chiều rộng như chúng ta mong đợi

[6. 47] Trong bài học này, chúng tôi đã tạo kiểu cho lựa chọn của mình bằng nhiều thuộc tính CSS hiện đại. Đầu tiên, chúng tôi sử dụng màn hình. lưới và ý tưởng về một khu vực mẫu duy nhất để đặt các mục của chúng tôi trong khung vẽ của trường biểu mẫu đã chọn. Điều này cho phép chúng tôi căn chỉnh các phần tử của mình mà không cần sử dụng định vị tuyệt đối và chúng tôi đã học cách sử dụng đường dẫn clip để tạo hình dạng mũi tên thả xuống tùy chỉnh

Làm cách nào để chọn nhiều tùy chọn trong danh sách thả xuống trong HTML?

Làm cách nào để tạo danh sách thả xuống nhiều lựa chọn trong JavaScript?

Làm cách nào để tạo danh sách thả xuống nhiều lựa chọn với hộp kiểm trong HTML?

Làm cách nào để sử dụng bootstrap multiselect js?