Tùy chọn CSS

Khi nói đến các thành phần giao diện người dùng, có hai phương pháp linh hoạt mà chúng tôi có thể sử dụng để xây dựng nó cho trang web của bạn. chúng tôi có thể sử dụng các thành phần dựng sẵn từ một thư viện hoặc khung nổi tiếng hoặc chúng tôi có thể phát triển các thành phần giao diện người dùng của mình từ đầu

Phát triển các thành phần CSS độc đáo là một chiến lược tốt hơn vì chúng ta có nhiều quyền kiểm soát hơn đối với chúng với tư cách là nhà phát triển và có thể thay đổi các giá trị khi cần thiết. Là nhà phát triển giao diện người dùng trong hơn ba năm, việc tạo các thành phần thả xuống chọn tùy chỉnh để điều hướng, chọn tùy chọn từ danh sách hoặc lọc lựa chọn được cung cấp là một trong những yêu cầu phổ biến nhất khi xây dựng giao diện người dùng

Có một số trường hợp sử dụng cho thẻ < select >, như danh sách thả xuống, menu điều hướng, lọc danh sách các mục dựa trên tùy chọn đã chọn, chọn một tùy chọn từ danh sách tùy chọn nhất định trong biểu mẫu nhập, v.v. Có rất nhiều khung CSS và thư viện JavaScript, bao gồm Bootstrap, Material UI và Ant Design, và mỗi trong số chúng có triển khai riêng của menu thả xuống Chọn CSS tùy chỉnh. Chúng cực kỳ đáng tin cậy và đã chứng minh chức năng của nhiều trình duyệt

Kiểu thả xuống của nhiều trình duyệt rất khó khăn. Các nhà thiết kế luôn tạo danh sách thả xuống hấp dẫn, nhưng mỗi trình duyệt hiển thị chúng hơi khác nhau. Bạn có thể tìm hiểu thêm về kết xuất trình duyệt từ blog này trên Công cụ trình duyệt. Mấu chốt của khả năng tương thích trình duyệt chéo

Khi nghĩ về chức năng của nhiều trình duyệt, việc sử dụng khung hoặc thư viện CSS sẽ có lợi vì chúng xử lý tất cả các tác vụ hậu trường liên quan đến việc tạo một thành phần cụ thể

Khi sử dụng các thư viện và khung CSS này như Bootstrap hoặc Tailwind CSS, chức năng của nhiều trình duyệt là tối quan trọng vì người dùng cuối sử dụng các hệ điều hành, trình duyệt và thiết bị khác nhau. Nếu muốn mọi người có cùng trải nghiệm, chúng ta chỉ nên sử dụng những thư viện và framework hoạt động tốt trên mọi thiết bị, hệ điều hành và trình duyệt. Hầu hết các khung hiện đại đều xem xét nhu cầu về khả năng tương thích giữa các trình duyệt và duy trì kiểu dáng thân thiện với thiết bị

Trong blog chuyên sâu về menu CSS Select tùy chỉnh này, chúng ta sẽ xem qua quy trình tạo các menu CSS Select tùy chỉnh khác nhau

Vậy hãy bắt đầu

Phần tử HTML < select > đại diện cho một điều khiển với một menu lựa chọn. Thông thường, chúng ta sử dụng phần tử select để tạo danh sách thả xuống. Phần tử < select > được sử dụng thường xuyên nhất trong các biểu mẫu để thu thập thông tin đầu vào của người dùng

Các thẻ chọn sử dụng nhiều thuộc tính, cung cấp thêm chi tiết về các phần tử HTML. Nếu chúng tôi bỏ qua thuộc tính tên, sẽ không có dữ liệu nào từ danh sách thả xuống được gửi. Cần có thuộc tính id để liên kết danh sách thả xuống với nhãn. Các

Phần tử < select > thường được sử dụng khi chúng tôi yêu cầu thông tin về quốc gia của người dùng trong biểu mẫu đăng nhập hoặc thanh điều hướng của trang web. Để duy trì khả năng truy cập của trang web, chúng tôi thường sử dụng thẻ nhãn để giúp người dùng cuối dễ truy cập và tốt hơn

Thuộc tính HTML là các từ khóa duy nhất được sử dụng trong thẻ mở để điều chỉnh hành vi của phần tử. Thuộc tính HTML là một loại công cụ sửa đổi cho phần tử HTML. Các thuộc tính cung cấp thông tin bổ sung về các phần tử HTML

Thẻ chọn có nhiều đặc điểm khác nhau, bao gồm

• Tự động lấy nét (Loại – Boolean). Thuộc tính tự động lấy nét của HTML < select > được sử dụng để chỉ định rằng trình đơn thả xuống sẽ tự động lấy tiêu điểm khi tải trang hoặc khi người dùng đến một chế độ xem nhất định
• Bắt buộc (Loại – Boolean). Thuộc tính bắt buộc của HTML < input > chỉ ra rằng người dùng phải chọn một giá trị trước khi gửi biểu mẫu. Thuộc tính bắt buộc là thuộc tính boolean. Nhiều loại đầu vào hỗ trợ thuộc tính bắt buộc, bao gồm văn bản, tìm kiếm, URL, điện thoại, email, mật khẩu, bộ chọn ngày, số, hộp kiểm, radio và tệp
• Nhiều (Loại – Boolean). Nhiều thuộc tính HTML xác định rằng người dùng được phép chọn nhiều hơn một tùy chọn (hoặc giá trị) từ danh sách các tùy chọn đã cho bên trong phần tử < select >. Ngoài ra, nó có thể hoạt động với thẻ < input >
• Đã tắt (Loại – Boolean). Để chỉ ra rằng một phần tử được chọn bị vô hiệu hóa, chúng tôi sử dụng thuộc tính bị vô hiệu hóa. Không thể sử dụng hoặc nhấp vào danh sách thả xuống bị vô hiệu hóa. Nó cũng là một thuộc tính boolean
• Tên (Loại – Chuỗi). Tên của danh sách thả xuống được chỉ định bằng thuộc tính tên. Nó có thể tham chiếu một phần tử trong JavaScript hoặc dữ liệu biểu mẫu sau khi gửi nó

Lợi ích chính của những từ khóa này bao gồm khả năng truy cập, cung cấp thông tin bổ sung cho phần tử HTML, v.v.

Hãy xem xét một số trường hợp sử dụng cho các thuộc tính này với một vài ví dụ

      src="A Link to an image or any local image "

      alt="an alternative test if the browser can't display the image"

Chúng ta có thể thấy một số thuộc tính của phần tử < img > trong ví dụ này. Các thuộc tính này cung cấp thông tin bổ sung cho phần tử < img >. Có hơn 12 thuộc tính cho thẻ < img >

Ở đây, chúng tôi đã sử dụng các thuộc tính như src, tương ứng với nguồn/liên kết của hình ảnh, alt, cung cấp mô tả văn bản đầy ý nghĩa để tăng khả năng truy cập, và chiều cao và chiều rộng, mô tả chiều cao và chiều rộng của hình ảnh

Tên đầu tiên


    


    Last name


    



    

                                        

The use of several HTML attributes can be seen in the examples above, including action, which specifies the action to be taken when the form is submitted, If the action attribute is omitted, then the default action will be set to the current page

The name attribute corresponds to the name of the current element as defined by the user, id, which is a unique user-defined name, and value, which is used differently for various input types, such as text for buttons and the initial value for < input > elements

Other attributes include style, class, and other global attributes that can be used with all HTML elements and some specific to certain HTML elements, such as href and defer

We won’t go into great detail about HTML attributes because that is outside the scope of this blog on CSS Select, but it is crucial to take accessibility, providing meaningful descriptions via attributes, and following best practices into consideration

Test Custom Menus on the latest desktop and mobile browsers. Try LambdaTest Now

Dropdowns vs. Select vs. Menu vs. Navigation

One common misunderstanding among novice developers is the names mentioned while discussing dropdowns. The most common of which are dropdown, select, and menu

In this section of the CSS Select blog, let’s have a closer look at what they are

Dropdown

An interactive element made up of a button that, typically on mouse hover, click, or tap, reveals and conceals a list of items. Before the beginning of the interaction, the list is hidden by default

A drop-down list only shows one value when it is not active. When the user interacts with the dropdown, a list of values is displayed for the user to choose from

Material UI Dropdown

A form control that shows a list of choices on a form for the user to select a single item or multiple items

To make a drop-down list, we use the HTML < select > element. The < select > element is most frequently used in forms for gathering user inputs

The < select >4 tag defines a list/menu of commands or actions that can be performed on a website

Currently, the < select >4 tag is supported in Firefox, and it doesn’t work on popular browsers like Chrome, Internet Explorer, Safari, and Opera Mini. Presently, it has been removed from the HTML5 standards

Nguồn

Navigation

Menu điều hướng trên một trang web là một tập hợp có cấu trúc các kết nối đến các trang web khác, thường là các trang nội bộ

Navigation menus are most frequently found in page headers or sidebars, allowing users to rapidly reach the most important pages on a website

Bootstrap Navigation Menu

How to construct a basic HTML Select field?

This section of this blog on CSS Select will discuss the basic aspects of web design involved in the HTML Select element and how to use CSS to style it

First, the < select > tag is often used when we need to get user input, and the user is given various options to choose from. It may resemble selecting various states or nations, or it might even resemble using a dropdown to switch between pages

Below is the source code for constructing a select section

HTML

            

Output

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen

The output of the code looks as follows

This is straightforward and is a good place to begin. Let’s now add custom CSS to make it look good as well as design friendly

CSS

    font-family. 'Open Sans', sans-serif;

    background-color. rgb(255, 255, 255);

    border. 1px solid rgb(41, 18, 18);

    font-family. 'Open Sans', sans-serif;

màu nền. rgb(247, 247, 247);

    border. 1px solid rgb(41, 18, 18);

Output

Despite having styles applied to it, the < select > tag’s styles hardly ever change. This is because they are not usual DOM elements, making them behave differently from others

For developers, the < select > and < select >9 elements are the most frustrating form controls due to their lack of styling support. This is because they are rendered by the operating system, not HTML. There are only a few style attributes that can be applied to the < select >9. Because of how much of a UX battle it is, we will look into other solutions

The above image makes it clear that applying styles to the < select >9 tag does not work as intended. The events like click or keypress on

A consistent way to mark up the functionality of a list of selectable options is provided by the < select > element. Nevertheless, the browser has complete control over how that list is displayed and can do so most effectively considering the operating system, browser, and current device

Since we can never be certain how it will be presented, trying to style it in any way may not be effective. We can look into some examples where we test how select tags are presented for different browsers, operating systems, etc

HTML

                                            

      

      

      

      

Output (macOS)

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen

See the Pen
Untitled by adarsh (@adarsh-gupta101)
on CodePen

We can see that the < select > tag is rendered differently. This can be an issue for users if we develop a web application that only considers a particular browser or operating system. We must consider all the major operating systems and browsers to ensure that our application is compatible with cross-browser

We now comprehend the need for customized CSS Select menus, so let’s start creating those

How to create a custom dropdown menu with CSS Select?

In this section, we will look at how to create dropdown menus using CSS Select

There are numerous ways to create a dropdown menu. We can either use CSS to make custom dropdowns or the native select tag to create dropdown menus. All we have to do is to use appropriate HTML elements and then style them accordingly

We can use CSS Select to its full potential to make custom drop-down elements. With drop-down menus, users can quickly access your site’s content without scrolling. Drop-down menus can save users time by allowing them to jump down a level or two to find the content they want

A good example of dropdowns in use is in e-commerce websites, where users will see dropdown inputs during checkout. Let’s now create some custom dropdown menus

Creating custom dropdown menus with Grid layout

In this first example of this blog on CSS Select, using the standard < select > tag and custom CSS, we can now walk through the code for creating dropdowns that can be controlled using the attributes

The disabled attribute specifies whether the element should be disabled or not. The multiple attributes specify that the user is allowed to select more than one value. Additionally, we have added styling-related attributes like id and class

Here we use the CSS Grid layout for creating drop-downs. Grid is a CSS property that handles the layout in a two-dimensional grid system with columns and rows. Các phần tử có thể được đặt trên lưới trong các dòng cột và hàng này. Since we have full control of where to place the item, this property makes the grid ideal for creating drop-downs

Using the native < select > tag present in HTML, we will create dropdowns that can be controlled by altering attributes like disabled, multiple, etc

HTML

  

  

Menu chọn mặc định

nhiều lựa chọn

    

    

    

    

    

    

  

Đã tắt Chọn

Vô hiệu hóa nhiều lựa chọn

    

    

    

    

    

    

CSS

--select-mũi tên. var(--select-viền);

màu nền. trong suốt;

grid-template-khu vực. "lựa chọn";

biên giới. var rắn 1px (--select-biên giới);

hình nền. linear-gradient(to top, #f9f9f9, #fff 33%);

lựa chọn. không phải(. chọn--nhiều). sau đó {

  background-color. var(--select-mũi tên);

đường dẫn clip. đa giác(100% 0%, 0 0%, 50% 100%);

biên giới. 2px solid var(--select-focus);

màu phác thảo. var(--chọn-tiêu điểm);

hình nền. độ dốc tuyến tính (lên trên cùng, #ddd, #eee 33%);

họ phông chữ. "Baloo 2", sans-serif;

màu nền. trời xanh;

Output

See the Pen
Tạo kiểu trường chọn tùy chỉnh chỉ với CSS của adarsh ​​(@ adarsh-gupta101)
on CodePen

Thuộc tính bị vô hiệu hóa có thể được sử dụng để ngăn người dùng truy cập danh sách thả xuống trừ khi đáp ứng một điều kiện khác (như chọn hộp kiểm, v.v. ). Sau đó, giá trị bị vô hiệu hóa có thể được xóa bằng JavaScript, làm cho danh sách thả xuống có thể sử dụng được. Thuộc tính nhiều cho phép người dùng chọn nhiều mục từ danh sách, lý tưởng khi người dùng cần kiểm tra nhiều mục, chẳng hạn như chọn nhiều thể loại từ Spotify

Tạo các menu chọn tùy chỉnh với các yếu tố đầu vào

Trong ví dụ sau, các menu được chọn sẽ được tạo bằng cách sử dụng thẻ < input >. Thẻ < input > thường được sử dụng để thu thập dữ liệu từ người dùng. < input >tags come in various forms to accommodate the various ways users can select, add, and filter data

Một số loại thẻ < input > được hiển thị trong ví dụ bên dưới

HTML

  

  

  

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

Output

Bây giờ, hãy sử dụng CSS để định vị các mục menu và chuyển đổi nút radio, một loại nút nhập liệu, thành hộp Chọn tùy chỉnh

Trong các biểu mẫu nhập liệu, các nút radio thường được sử dụng để chọn một giá trị từ các tùy chọn có sẵn, chẳng hạn như chọn giới tính tương ứng. Ở đây, chúng tôi sẽ sử dụng CSS để tùy chỉnh chức năng này để trở thành một danh sách thả xuống có thể lựa chọn

HTML

    

    

    

    

Nền tảng nào thân thiện với nhà phát triển nhất?

        

        

             Chọn nền tảng

             Github

             Github

             YouTube

             YouTube

             W3Schools

             W3Schools

             LeetCode

             LeetCode

             StackOverflow

             StackOverflow

             FreeCodeCamp

             FreeCodeCamp

          

CSS

họ phông chữ. "Giao diện người dùng Segoe", Tahoma, Geneva, Verdana, sans-serif;

màu viền. #eaf1f1 #e4eded #dbe7e7 #e4eded;

màu nền. #f3f9f9;

màu nền. rgb(247, 247, 247);

#options-view-button. đã chọn + #nút chọn #chevrons i {

#options-view-button. đã kiểm tra ~ #options {

màu viền. #eaf1f1 #e4eded #dbe7e7 #e4eded;

#options-view-button. đã kiểm tra ~ #options. tùy chọn tôi {

#options-view-button. đã kiểm tra ~ #options. nhãn {

hoạt hình. tiến lên 0. 3s dễ dàng 0. 1s chuyển tiếp;

hoạt hình. chuyển xuống 0. 3s dễ dàng 0. 1s chuyển tiếp;

màu nền. rgb(247, 247, 247);

  . tùy chọn đầu vào [loại = "đài"]. kiểm tra ~. lựa chọn giá trị {

  . tùy chọn đầu vào [loại = "đài"]. đã kiểm tra ~ tôi {

  . tùy chọn đầu vào [loại = "đài"]. đã kiểm tra ~ tôi,

  . tùy chọn đầu vào [loại = "đài"]. kiểm tra ~. nhãn {

  . tùy chọn đầu vào [loại = "đài"]. kiểm tra ~. nhãn. trước {

#options-view-button. không phải(. đã kiểm tra)

đầu vào [loại = "đài"]. đã kiểm tra

  . quyền mua. đầu vào con thứ n(1)[type="radio"]. kiểm tra ~. nhãn. trước {

  . quyền mua. đầu vào con thứ n(1)[type="radio"]. kiểm tra ~. opt-val {

  . quyền mua. đầu vào con thứ n(2)[type="radio"]. kiểm tra ~. nhãn. trước {

màu nền. #f70800;

  . quyền mua. đầu vào con thứ n(2)[type="radio"]. kiểm tra ~. lựa chọn giá trị {

  . quyền mua. đầu vào con thứ n(3)[type="radio"]. kiểm tra ~. nhãn. trước {

màu nền. #09ff00;

  . quyền mua. đầu vào con thứ n(3)[type="radio"]. kiểm tra ~. lựa chọn giá trị {

  . quyền mua. đầu vào con thứ n(4)[type="radio"]. kiểm tra ~. nhãn. trước {

màu nền. #f18203;

  . quyền mua. đầu vào con thứ n(4)[type="radio"]. kiểm tra ~. lựa chọn giá trị {

  . quyền mua. đầu vào con thứ n(5)[type="radio"]. kiểm tra ~. nhãn. trước {

màu nền. #b6590c;

  . quyền mua. đầu vào con thứ n(5)[type="radio"]. kiểm tra ~. lựa chọn giá trị {

  . quyền mua. đầu vào con thứ n(6)[type="radio"]. kiểm tra ~. nhãn. trước {

  . quyền mua. đầu vào con thứ n(6)[type="radio"]. kiểm tra ~. lựa chọn giá trị {

#options-view-button. đã kiểm tra ~ #options #option-bg {

  . quyền mua. con thứ n(1). hover ~ #option-bg {

  . quyền mua. con thứ n(2). di chuột ~ #option-bg {

màu nền. #f70800;

  . quyền mua. con thứ n(3). di chuột ~ #option-bg {

màu nền. #09ff00;

  . quyền mua. con thứ n(4). di chuột ~ #option-bg {

màu nền. #ff7300;

  . quyền mua. con thứ n(5). di chuột ~ #option-bg {

màu nền. #b6590c;

  . quyền mua. con thứ n(6). di chuột ~ #option-bg {

Output

See the Pen
Hộp chọn CSS thuần túy có hiệu ứng di chuột theo hướng của adarsh ​​(@ adarsh-gupta101)
on CodePen

Tạo menu thả xuống tùy chỉnh với CSS Flexbox

Để làm cho menu chọn thân thiện hơn với người dùng, giờ hãy sử dụng các kỹ năng CSS của chúng ta bằng cách định vị các thành phần thả xuống bằng các thuộc tính CSS khác nhau như vị trí và hộp linh hoạt

CSS Flexbox là một bố cục giúp đơn giản hóa việc tạo cấu trúc bố cục linh hoạt, đáp ứng mà không cần sử dụng thuộc tính float hoặc vị trí. Flexbox chỉ xử lý bố cục theo một chiều tại một thời điểm, hàng hoặc cột. Điều này làm cho Flexbox trở nên tuyệt vời cho trình đơn thả xuống được tùy chỉnh với div và span HTML vì chúng tôi có thể đặt thuộc tính flex-direction để làm cho nó xuất hiện dưới dạng trình đơn thả xuống

Chúng tôi có thể tự do sửa đổi menu thả xuống để nó bổ sung cho các khía cạnh thiết kế của trang web

HTML

    

    

    

    

      

YouTube

      

co giật

      

TikTok

      

Cuộn Instagram

      

Quần short trên Youtube

CSS

lai lịch. rgb(9, 184, 67);

đường viền trên cùng. #222 1px cố định;

chuyển tiếp. lai lịch. 4s dễ dàng ra vào;

lai lịch. rgb(8, 145, 26);

đầu vào. đã kiểm tra + nhãn. sau đó {

biên giới bên trái. 5px trong suốt;

biên giới bên phải. 5px trong suốt;

đường viền trên cùng. 5px màu trắng đặc;

đầu vào. đã kiểm tra + nhãn. trước {

màn hình @media và (chiều rộng tối đa. 600px) {

Output

See the Pen
Các tùy chọn "chọn" được tạo kiểu bằng CSS3 và Flexbox bởi adarsh ​​(@ adarsh-gupta101)
on CodePen

Lọc các tùy chọn trong danh sách thả xuống bằng JavaScript

Chúng ta có thể sử dụng các thuộc tính CSS như Flexbox và Grid để tạo bố cục cho menu đã chọn của mình

Flexbox là một bố cục CSS giúp đơn giản hóa việc tạo cấu trúc bố cục linh hoạt, đáp ứng mà không cần sử dụng thuộc tính float hoặc vị trí. Flexbox chỉ xử lý bố cục theo một chiều tại một thời điểm, hàng hoặc cột. Điều này làm cho flexbox trở nên tuyệt vời cho trình đơn thả xuống tùy chỉnh với div và span HTML vì chúng ta có thể đặt thuộc tính flex-direction để làm cho nó xuất hiện dưới dạng trình đơn thả xuống

Chúng tôi sử dụng Truy vấn phương tiện CSS để làm cho trình đơn thả xuống của chúng tôi phản hồi nhanh. Chúng ta phải xem xét kích thước thiết bị tiêu chuẩn như 480 pixel, 640 pixel, 720 pixel, 1024 pixel, 1440 pixel, v.v. Mục tiêu chính của các trang web đáp ứng là đảm bảo trải nghiệm liền mạch trên các thiết bị kỹ thuật số khác nhau. Phần lớn các thư viện và framework ngày nay sử dụng kỹ thuật này. Vì vậy, chúng ta nên làm tương tự trong khi tạo danh sách thả xuống tùy chỉnh

Chúng tôi đã tạo các menu Select tùy chỉnh bằng nhiều thuộc tính CSS, chẳng hạn như Flexbox, Grid và định vị, và bây giờ là lúc chúng tôi phát huy khả năng sáng tạo thực sự của mình, tạo các menu select tùy chỉnh bằng CSS, cũng như với sự trợ giúp của JavaScript

JavaScript đang được sử dụng trong trường hợp này để tạo các tùy chọn có thể lọc, điều đó có nghĩa là khi người dùng nhập, các tùy chọn khác không giống với đầu vào đã cho trong danh sách tùy chọn sẽ bị xóa. Logic được sử dụng ở đây rất rõ ràng và đơn giản. Chúng tôi có một loạt các mục danh sách; . Nếu không có, chúng tôi sẽ xóa các mục đó khỏi danh sách thả xuống, cung cấp cho người dùng một danh sách nhỏ và được lọc

Điều này rất hữu ích khi người dùng phải chọn từ một danh sách dài như danh sách các quốc gia, tiểu bang, v.v.

HTML

  

  

  

  

  

có thể lọc chọn danh sách thả xuống

placeholder="Nhập để lọc"

biện minh cho nội dung. khởi động linh hoạt;

chuyển đổi văn bản. chữ hoa;

chuyển đổi văn bản. viết hoa;

màn hình @media và (chiều rộng tối đa. 768px) {

giá trị được chọn,. danh sách giá trị {

chuyển đổi văn bản. chữ hoa;

màu nền. #FAFCFD;

biên giới. 3px trong suốt;

chuyển tiếp. 0. 3s dễ dàng ra vào;

giá trị được chọn. -webkit-input-placeholder {

màu nền. #0844eb;

giá trị được chọn. bay lượn. -webkit-input-placeholder {

giá trị được chọn. tiêu điểm,. giá trị được chọn. mở ra {

bóng hộp. 0px 5px 8px 0px rgba(0, 0, 0, 0. 2);

màu nền. #2912f7;

giá trị được chọn. tiêu điểm. -webkit-đầu vào-giữ chỗ,. giá trị được chọn. mở ra. -webkit-input-placeholder {

bóng hộp. 0px 5px 8px 0px rgba(0, 0, 0, 0. 2);

chuyển tiếp. 0. 3s dễ dàng ra vào;

màu nền. #FAFCFD;

chuyển tiếp. màu nền 0. 3s;

màu nền. #450ae9;

JavaScript

const inputField = tài liệu. bộ chọn truy vấn ('. giá trị được chọn');

const thả xuống = tài liệu. bộ chọn truy vấn ('. danh sách giá trị');

const dropdownArray = [. tài liệu. querySelectorAll('li')];

thả xuống. danh sách lớp học. thêm ('mở');

thả xuốngArray. forEach(mục => {

giá trịArray. đẩy (mục. textContent);

thả xuống. danh sách lớp học. xóa ('mở');

trường đầu vào. addEventListener('đầu vào', () => {

thả xuống. danh sách lớp học. thêm ('mở');

hãy để inputValue = inputField. giá trị. toLowerCase();

for (hãy j = 0; j < valueArray. chiều dài;

nếu (. (giá trị đầu vào. chuỗi con(0, giá trị đầu vào. chiều dài) === valueArray[j]. chuỗi con(0, giá trị đầu vào. chiều dài). toLowerCase())) {

dropdownArray[j]. danh sách lớp học. thêm ('đã đóng');

dropdownArray[j]. danh sách lớp học. xóa ('đã đóng');

for (hãy i = 0; tôi < dropdownArray. chiều dài;

      dropdownArray[i]. danh sách lớp học. xóa ('đã đóng');

thả xuốngArray. forEach(mục => {

mục . addEventListener('click', (evt) => {

trường đầu vào. giá trị = mục. văn bảnNội dung;

thả xuốngArray. forEach(thả xuống => {

thả xuống. danh sách lớp học. thêm ('đã đóng');

trường đầu vào. addEventListener('tiêu điểm', () => {

trường đầu vào. placeholder = 'Nhập vào bộ lọc';

thả xuống. danh sách lớp học. thêm ('mở');

thả xuốngArray. forEach(thả xuống => {

thả xuống. danh sách lớp học. xóa ('đã đóng');

trường đầu vào. addEventListener('mờ', () => {

trường đầu vào. placeholder = 'Chọn Techie yêu thích';

thả xuống. danh sách lớp học. xóa ('mở');

tài liệu. addEventListener('click', (evt) => {

const isDropdown = danh sách thả xuống. chứa (evt. Mục tiêu);

const isInput = inputField. chứa (evt. Mục tiêu);

nếu (. isDropdown &&. là đầu vào) {

thả xuống. danh sách lớp học. xóa ('mở');

See the Pen
Danh sách thả xuống chọn theo kiểu CSS và có thể lọc bởi adarsh ​​(@ adarsh-gupta101)
on CodePen

Tạo danh sách thả xuống hoàn toàn tùy chỉnh

Giờ đây, chúng ta đã đề cập đến nhiều kỹ thuật khác nhau để xây dựng các menu Chọn tùy chỉnh bằng cách sử dụng CSS và JavaScript để thêm tính tương tác, chúng ta có thể sử dụng cả hai công nghệ này và sự sáng tạo của mình để tạo các tùy chọn Chọn CSS tùy chỉnh thân thiện với người dùng hơn nhiều

Ở đây, chúng tôi sẽ tạo một menu chọn tương tác nơi người dùng có thể chọn giá trị hiệu quả hơn dựa trên sở thích của mình

HTML

  

  

  

  

  

Trình duyệt tốt nhất là

    

FireFox

        

        

        

        

        

        

CSS

@nhập url('https. //phông chữ. googleapis. com/css?family=Poppins &display=swap');

lai lịch. rgb(26, 23, 23);

họ phông chữ. 'Poppins', serif;

tùy chọn đánh máy,. liệt kê một tùy chọn {

chuyển tiếp. tất cả 0. 4s dễ dàng ra vào;

chuyển tiếp. tất cả 0. 4s dễ dàng ra ngoài;

viền dưới. chất rắn 2px #555;

chuyển tiếp. tất cả 0. 4s dễ dàng ra vào;

viền dưới. 1px rắn #555;

JavaScript

tài liệu. truy vấnSelector(". trình giữ chỗ"). onclick = hàm (e) {

tài liệu. truy vấnSelector(". trình giữ chỗ"). Phong cách. độ mờ = "0. 01";

tài liệu. truy vấnSelector(". list__ul"). Phong cách. hiển thị = "khối";

tài liệu. truy vấnSelector(". list__ul a"). addEventListener("click", function (ev) {

var index = tài liệu. querySelector(cái này). cha mẹ(). mục lục();

    . truy vấnSelector(". trình giữ chỗ")

    . tai liệu kiểm tra. querySelector(cái này). chữ())

tài liệu. truy vấnSelector(". list__ul"). querySelector("li"). eq(chỉ mục). html()

    . truy vấnSelector(". list__ul")

tài liệu. truy vấnSelector(". list__ul"). chuyển đổi();

tài liệu. truy vấnSelectorAll(". list__ul a"). forEach((q) => {

q. addEventListener("click", function (ev) {

bảng điều khiển. nhật ký (q. textContent);

tài liệu. truy vấnSelector(". trình giữ chỗ"). textContent = q. văn bảnNội dung;

tài liệu. truy vấnSelector(". trình giữ chỗ"). Phong cách. độ mờ = "1";

tài liệu. truy vấnSelector(". list__ul"). Phong cách. hiển thị = "không";

See the Pen
Lựa chọn tùy chỉnh đơn giản của adarsh ​​(@ adarsh-gupta101)
on CodePen

Chúng tôi đã thấy một số ví dụ hay về menu thả xuống tùy chỉnh, nhưng một điều chúng tôi nên ghi nhớ là khả năng truy cập của trang web

Khả năng truy cập web là gì?

Khả năng truy cập web là một tập hợp các phương pháp đòi hỏi phải thiết kế và phát triển các trang web cũng như các công cụ kỹ thuật số để những người có khả năng khác nhau có thể sử dụng chúng mà không gặp khó khăn

Khi các ứng dụng web trở nên phức tạp và năng động hơn, một loạt tính năng trợ năng mới và các sự cố đã xuất hiện. HTML đã giới thiệu nhiều yếu tố ngữ nghĩa như < select >0 và < select >1. Semantic HTML bổ sung ý nghĩa cần thiết cho trang web thay vì chỉ trình bày. Điều này cho phép trình duyệt web, công cụ tìm kiếm, trình đọc màn hình, trình đọc RSS và người dùng hiểu rõ hơn

W3C's Web Accessibility Initiative – Accessible Rich Internet Applications là một loạt các thông số kỹ thuật xác định một tập hợp các thuộc tính HTML mới có thể được thêm vào các phần tử để cung cấp thêm ngữ nghĩa và cải thiện khả năng truy cập khi cần. Các tài liệu Hướng dẫn về khả năng truy cập nội dung web (WCAG) mô tả cách cải thiện khả năng truy cập nội dung web cho những người khuyết tật

Những người bị khuyết tật tạm thời, chẳng hạn như người bị gãy tay hoặc những hạn chế về tình huống, chẳng hạn như khi một người không thể nghe âm thanh do có nhiều tiếng ồn xung quanh, cũng bị ảnh hưởng bởi khả năng truy cập web

Hầu như tất cả các trang web hiện đều tuân theo các phương pháp hay nhất, HTML ngữ nghĩa và các thuộc tính HTML phù hợp. Mọi người tin rằng việc làm cho các trang web có thể truy cập được cho tất cả người dùng đòi hỏi thời gian và công sức đáng kể trong khi mang lại lợi ích cho một số ít cá nhân. Tuy nhiên, điều này không hoàn toàn đúng. Tất cả chúng ta sẽ phải đối mặt với một số loại khuyết tật tạm thời tại một số điểm. Do đó, chúng tôi cần xem xét tất cả mọi người về khả năng tiếp cận

Để tìm hiểu thêm về kiểm tra khả năng truy cập, bạn có thể xem video sau đây về cách thực hiện kiểm tra khả năng truy cập với khung tự động kiểm tra Cypress

Làm cách nào để có thể truy cập danh sách thả xuống?

Để giúp mọi người dễ dàng tìm thấy những gì họ đang tìm kiếm trên trang web của bạn, menu thả xuống phải có thể truy cập được. Nếu không, họ có thể mất nhiều thời gian hơn để xem những gì họ cần hoặc họ có thể bỏ lỡ hoàn toàn các phần của trang web của bạn

See the Pen
[A11Y] Menu thả xuống có thể truy cập của Tristan Wilson (@srirachachacha)
on CodePen

Sau đây là một số phương pháp hay nhất cần ghi nhớ khi xử lý các trường hợp thả xuống

ngữ nghĩa tốt

Tính năng xác định của phần tử ngữ nghĩa là nó truyền đạt ý nghĩa của nó cho cả nhà phát triển và trình duyệt. Các yếu tố này xác định rõ nội dung của nó. Bất cứ khi nào có thể, hãy sử dụng HTML ngữ nghĩa để trình đọc màn hình có thể truy cập trình đơn của bạn và làm cho mã của bạn dễ hiểu hơn

Các công cụ tìm kiếm và các thiết bị người dùng khác có thể sử dụng các thẻ HTML ngữ nghĩa để xác định tầm quan trọng và ngữ cảnh của các trang web. Một số thẻ ngữ nghĩa HTML được đưa ra dưới đây

• < select >2. Thẻ < select >2 được sử dụng để chứa thông tin có thể được phân phối độc lập với phần còn lại của trang web
• < select >4. The < select >4 element denotes a portion of a page that contains content that is indirectly linked to but distinct from the content around the aside element
• < select >6. Thẻ < select >6 biểu thị thông tin độc lập như hình minh họa, sơ đồ, hình ảnh, danh sách mã, v.v.
• < select >8. Phần tử HTML < select >8 biểu thị một phần trang có chức năng cung cấp các liên kết điều hướng, trong nội dung hiện tại hoặc tới các ấn phẩm khác
• < select >1. Một < select >1 là một yếu tố ngữ nghĩa được sử dụng để tạo các phần độc lập trên một trang web

Cấu trúc thiết kế

Cấu trúc thiết kế sao cho mọi thứ được kết nối với nhau theo một cách nào đó để người dùng có lộ trình cho hành trình của họ. Cấu trúc cũng đòi hỏi phải đặt tiêu đề, phần, thanh điều hướng, đầu trang, chân trang, v.v. , ở những nơi thích hợp. Các yếu tố ngữ nghĩa này đại diện cho các phần logic và cung cấp một cách tốt hơn để cấu trúc trang web

Một trang web có cấu trúc ngữ nghĩa có thể truy cập, bất kể quy mô hay độ phức tạp, sẽ có khả năng cung cấp khả năng truy cập. Nếu không có nền tảng ngữ nghĩa vững chắc, khả năng truy cập trang web của bạn sẽ giảm khi nó phát triển. Đặt cấu trúc phù hợp sớm trong quá trình phát triển sẽ giúp trang web của bạn vẫn có thể truy cập được khi nó phát triển

Tránh những cạm bẫy bàn phím

Trên các trang web, các vấn đề về khả năng truy cập bàn phím phát sinh khi các nhà thiết kế hoặc nhà phát triển sử dụng các phương pháp vi phạm chức năng bàn phím cơ bản. Sự cố xảy ra khi người dùng có thể điều hướng qua các mục của menu bằng phím Tab nhưng không thể rời khỏi menu, khiến chúng bị lặp lại

Sau đây là một số phương pháp hay nhất để tạo các trang web có thể truy cập bằng bàn phím

• Tất cả các liên kết và điều khiển có thể được truy cập bằng phím Tab trên bàn phím
• Tất cả các thành phần trong giao diện người dùng phải tuân theo các thông lệ WAI-ARIA của W3C
• Nên tránh các ứng dụng, plugin, tiện ích con và kỹ thuật JavaScript bẫy bàn phím
• Nâng cao chỉ báo tiêu điểm mặc định của trình duyệt

Thực hiện độ trễ thời gian giữa chuột rời khỏi khu vực menu và đóng menu. Khách truy cập có thể sử dụng con trỏ nhưng thiếu khả năng điều khiển động cơ tốt yêu cầu các menu thả xuống hiển thị trong một khoảng thời gian đủ để sử dụng. Mọi người nên dành một chút thời gian để tương tác với menu

Trong trường hợp liên kết ở dạng thả xuống, menu phải được mã hóa dưới dạng danh sách liên kết không theo thứ tự cho các công nghệ hỗ trợ được người dùng mù sử dụng để họ có thể đếm số lượng liên kết trong mỗi menu thả xuống hoặc điều hướng chính. Họ cũng cần biết liên kết nào đưa họ đến trang họ đang truy cập

Đây là một số phương pháp hay nhất quan trọng nhất đối với khả năng truy cập web. Như chúng ta đã thấy, để làm cho các menu thả xuống có thể truy cập được, chúng ta cần xem xét nhu cầu của các nhóm người dùng khuyết tật khác nhau

Tạo menu thả xuống đơn giản, dễ hiểu và dễ hiểu, cho họ thêm thời gian để phản ứng với chuyển động của chuột, sử dụng cú pháp phù hợp cho người dùng trình đọc màn hình và đảm bảo menu của bạn tương thích với bàn phím cuối cùng sẽ góp phần mang lại khả năng truy cập tốt hơn

Làm cách nào để kiểm tra menu tùy chỉnh trên nhiều trình duyệt?

Khi tạo một menu mới cho trang web của bạn, làm thế nào bạn có thể đảm bảo rằng nó hoạt động và hoạt động với tất cả các trình duyệt? . Kiểm tra trang web trên các kết hợp trình duyệt và hệ điều hành khác nhau

Tuy nhiên, vấn đề với việc kiểm tra các menu tùy chỉnh của trang web của bạn trên nhiều trình duyệt là nó có thể tốn thời gian. Bạn phải kiểm tra mọi kết hợp hệ điều hành và trình duyệt, vì vậy bạn phải kiểm tra trang web của mình trên hàng chục hoặc hàng trăm kết hợp. Đây là một sự lãng phí thời gian rất lớn, đặc biệt là khi một số kết hợp không liên quan hoặc không cần thiết

Có một cơ hội tốt là có sự khác biệt đáng kể giữa cách hoạt động của các menu tùy chỉnh trong mỗi trình duyệt và bạn sẽ cần kiểm tra những khác biệt này. Nhưng thay vì lãng phí thời gian của bạn bằng cách xem qua toàn bộ danh sách hệ điều hành và trình duyệt, bạn có thể sử dụng các công cụ kiểm tra đám mây như LambdaTest

Các nền tảng thử nghiệm trình duyệt chéo như LambdaTest cho phép bạn thực hiện thử nghiệm web và cung cấp nhóm trình duyệt trực tuyến gồm hơn 3000+ trình duyệt và tổ hợp hệ điều hành

Ngoài ra, bạn có thể sử dụng các công cụ như LT Browser để kiểm tra các trang web phản hồi. LT Browser của LambdaTest là một công cụ kiểm tra thân thiện với thiết bị di động với hơn 50 chế độ xem được cài đặt sẵn với nhiều độ phân giải tiêu chuẩn

Đăng ký kênh YouTube LambdaTest để xem hướng dẫn về thử nghiệm Selenium, thử nghiệm trình duyệt Playwright, Appium, v.v.

Phần kết luận

Congratulations on reaching this far. You’re a fantastic reader

Trong blog chi tiết này về cách tạo menu Select tùy chỉnh bằng CSS, chúng tôi đã đề cập đến nhiều cách khác nhau để tạo menu tương tự với sự trợ giúp của HTML, CSS và JavaScript. Not only did we experiment with creating dropdowns, but we also discussed various best practices and accessibility tips and tricks

Bây giờ chúng tôi biết cách tạo các menu chọn tùy chỉnh của bạn một cách hiệu quả và hiệu quả nhất

phong cách hạnh phúc

Frequently Asked Questions (FAQs)

Chọn CSS là gì?

TA CSS Selector is a way of selecting an HTML Element for styling. It does this by matching the element to patterns within a CSS document. These patterns are known as selectors and are usually represented as a sequence of tags, classes, and IDs

What is option in CSS?

The defines an option in a select list . Phần tử

Làm cách nào để định kiểu CSS thả xuống tùy chọn?

There are many ways to design a Each menu option can be defined by an .

What is option value in HTML?

The value attribute specifies the value to be sent to a server when a form is submitted . The content between the opening tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi. tags is what the browsers will display in a drop-down list. Tuy nhiên, giá trị của thuộc tính giá trị là những gì sẽ được gửi đến máy chủ khi biểu mẫu được gửi.

How to select option in HTML with value?

Thẻ select trong HTML được sử dụng để tạo danh sách thả xuống gồm các tùy chọn có thể được chọn. The option tag contains the value that would be used when selected. The default value of the select element can be set by using the 'selected' attribute on the required option . This is a boolean attribute.