HTML form with dropdown select

Responsive Dropdown Menu Bar with Search Field using only HTML & CSS

Hey friends, today in this blog you’ll learn how to create a Responsive Dropdown Menu Bar with Search Field using only HTML & CSS. You may know, I have shared many videos or blogs related to Navigation Bars. If you still haven’t watched them click here to watch them all now. But still, I haven’t created a video or blog on how to create a Responsive Dropdown Menu Bar with Search Box and our many viewers have requested it multiple times so I decided to create it. The Dropdown menu is important in web design and without it, your website is incomplete. A dropdown menu (sometimes called a pull-down menu or list) is a horizontal list of options/links that each contain a vertical menu to help visitors find a particular page or post on your website. And, A search box, search field, or search bar is a graphical control element used in every website. Search Box is an input field for a query or search term from the user to search and get related data, content from the database. In our Dropdown Menu design. there is the navigation bar which contains a logo, navigation links to the left side, and a search icon to the right side. When you hover on the particular link, there is appears the dropdown menu of that hovered link and there is also a sub dropdown menu that also appears on the drop menu hover as you can see in the preview image. After that, there is a search icon, and when you click on this icon, the logo, nav links disappear and the search field appears where you can type queries. You can copy the codes from the given boxes or download the code files from the given link Click here to download code files.

You might like this:

HTML CODE:

CSS CODE:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); * < margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; font-family: 'Poppins', sans-serif; >.wrapper < background: #171c24; position: fixed; width: 100%; >.wrapper nav < position: relative; display: flex; max-width: calc(100% - 200px); margin: 0 auto; height: 70px; align-items: center; justify-content: space-between; >nav .content < display: flex; align-items: center; >nav .content .links < margin-left: 80px; display: flex; >.content .logo a < color: #fff; font-size: 30px; font-weight: 600; >.content .links li < list-style: none; line-height: 70px; >.content .links li a, .content .links li label < color: #fff; font-size: 18px; font-weight: 500; padding: 9px 17px; border-radius: 5px; transition: all 0.3s ease; >.content .links li label < display: none; >.content .links li a:hover, .content .links li label:hover < background: #323c4e; >.wrapper .search-icon, .wrapper .menu-icon < color: #fff; font-size: 18px; cursor: pointer; line-height: 70px; width: 70px; text-align: center; >.wrapper .menu-icon < display: none; >.wrapper #show-search:checked ~ .search-icon i::before < content: "\f00d"; >.wrapper .search-box < position: absolute; height: 100%; max-width: calc(100% - 50px); width: 100%; opacity: 0; pointer-events: none; transition: all 0.3s ease; >.wrapper #show-search:checked ~ .search-box < opacity: 1; pointer-events: auto; >.search-box input < width: 100%; height: 100%; border: none; outline: none; font-size: 17px; color: #fff; background: #171c24; padding: 0 100px 0 15px; >.search-box input::placeholder < color: #f2f2f2; >.search-box .go-icon < position: absolute; right: 10px; top: 50%; transform: translateY(-50%); line-height: 60px; width: 70px; background: #171c24; border: none; outline: none; color: #fff; font-size: 20px; cursor: pointer; >.wrapper input[type="checkbox"] < display: none; >/* Dropdown Menu code start */ .content .links ul < position: absolute; background: #171c24; top: 80px; z-index: -1; opacity: 0; visibility: hidden; >.content .links li:hover > ul < top: 70px; opacity: 1; visibility: visible; transition: all 0.3s ease; >.content .links ul li a < display: block; width: 100%; line-height: 30px; border-radius: 0px!important; >.content .links ul ul < position: absolute; top: 0; right: calc(-100% + 8px); >.content .links ul li < position: relative; >.content .links ul li:hover ul < top: 0; >/* Responsive code start */ @media screen and (max-width: 1250px) < .wrapper nav< max-width: 100%; padding: 0 20px; >nav .content .links < margin-left: 30px; >.content .links li a < padding: 8px 13px; >.wrapper .search-box < max-width: calc(100% - 100px); >.wrapper .search-box input < padding: 0 100px 0 15px; >> @media screen and (max-width: 900px) < .wrapper .menu-icon< display: block; >.wrapper #show-menu:checked ~ .menu-icon i::before < content: "\f00d"; >nav .content .links < display: block; position: fixed; background: #14181f; height: 100%; width: 100%; top: 70px; left: -100%; margin-left: 0; max-width: 350px; overflow-y: auto; padding-bottom: 100px; transition: all 0.3s ease; >nav #show-menu:checked ~ .content .links < left: 0%; >.content .links li < margin: 15px 20px; >.content .links li a, .content .links li label < line-height: 40px; font-size: 20px; display: block; padding: 8px 18px; cursor: pointer; >.content .links li a.desktop-link < display: none; >/* dropdown responsive code start */ .content .links ul, .content .links ul ul < position: static; opacity: 1; visibility: visible; background: none; max-height: 0px; overflow: hidden; >.content .links #show-features:checked ~ ul, .content .links #show-services:checked ~ ul, .content .links #show-items:checked ~ ul < max-height: 100vh; >.content .links ul li < margin: 7px 20px; >.content .links ul li a < font-size: 18px; line-height: 30px; border-radius: 5px!important; >> @media screen and (max-width: 400px) < .wrapper nav< padding: 0 10px; >.content .logo a < font-size: 27px; >.wrapper .search-box < max-width: calc(100% - 70px); >.wrapper .search-box .go-icon < width: 30px; right: 0; >.wrapper .search-box input < padding-right: 30px; >> .dummy-text < position: absolute; top: 50%; left: 50%; width: 100%; z-index: -1; padding: 0 20px; text-align: center; transform: translate(-50%, -50%); >.dummy-text h2

Источник

How to make an HTML dropdown select with a searchbox

As a website developer, it is almost given that at some point you will work with HTML dropdown select, presenting the user with an array of options to select from.

This happens in the instances where you want the user to choose from already predefined answers/options instead of them entering their own.

This helps reduce redundancy in the system.

For instance, if you were to require the users to input their country, but let them type in the country name instead of selecting, this would create a disaster.

Let’s say the user’s country is USA. Some would write «United States of America», others «USA», others «United States», while others would misspell the name and write something totally different.

It would be a disaster trying to organize, analyze and present the information based on the users’ country. This shows why HTML dropdown select is quite an important form element.

However, this comes with some complexities when the select options are too many. Locating the desired option could become a headache.

For this reason, having a search box within the dropdown select options is such an incredible and life-saving feature that can save a lot of time for many users.

In this article, I will take you through a step-by-step process on how to add a search box to your forms dropdown select fields, using pure HTML or using bootstrap framework.

Making an HTML dropdown select with a search box

First, we will create a sample form on both pure HTML and in bootstrap, with a dropdown select option but without the search box. Then I will show you how to add it.

HTML form with dropdown select

    body < background: #eee; >.signupdiv < background: #fff; border: 1px solid #ddd; box-shadow: 1px 2px 3px #ccc; border-radius: 7px; text-align: center; width: 35%; display: block; margin: auto; margin-top: 100px; >#signupform < padding: 15px; >input, select < margin-bottom: 10px; height: 38px; border: 1px solid #ddd; padding-left: 10px; >input < width: 97%; >button, select < width: 100%; >button  
  Select your country United States of America Kenya United Kingdom India China Canada South Africa   Sign Up  
   

Below is the screenshot of the above code:

And below is how it looks like when you click on the dropdown select.

Bootstrap form with dropdown select

     body < background: #eee; >.signupdiv < background: #fff; border: 1px solid #ddd; box-shadow: 1px 2px 3px #ccc; padding: 10px; margin-top: 100px; >.form-group  
 
Select your country United States of America Kenya United Kingdom India China Canada South Africa  
 
Sign Up 
 
 
   

Below is the screenshot of the above code:

And below is how it looks like when you click on the dropdown select.

From the examples above, there seems to be no need for a search box since we have 7 countries in our options which are all visible at once. But when we include a full list of 195 countries. It’s incredibly important to have a search box to easily find the country when we start to type its name in the search box.

Adding a search box to the dropdown select

We now will go ahead and add a search box to the forms in the above examples.

We will use Select2 to add the search box functionality to the dropdown select fields.

Select2 is a jQuery-based replacement for select boxes. It supports searching remote data sets and infinite scrolling of results.

To start using it, we will need to include the Select2 compiled JavaScript and CSS files on our website. Then, we will initialize the select2 with dropdown select input using jQuery.

1. Using Select2 from a CDN

Including Select2 from a CDN (content delivery network) is the fastest way to set it up and start using it.

This is the recommended way to do include it. This makes it easier for you to deploy your project in different environments, and easily update Select2 when new versions are released.

To include it using this method, simply include the following lines of code in the section of your page.

2. Manual Installation

To manually install Select2 into your website project, download the select2 release of your choice from Github and copy the files in the dist directory to your project.

Then in the same way as using from CDN, add the following lines of code in the section of your page.

Replace above, the «path/to/file/» with the path to your files.

Note: In either of the two methods, make sure to import the jQuery library into your code before importing the select2 plugin or else it won’t work.

Initializing Select2 in your form dropdown select

Add the line of code below with the select input filed Id inside the jquery on ready function.

Examples

HTML form with dropdown select and search box

       body < background: #eee; >.signupdiv < background: #fff; border: 1px solid #ddd; box-shadow: 1px 2px 3px #ccc; border-radius: 7px; text-align: center; width: 35%; display: block; margin: auto; margin-top: 100px; >#signupform < padding: 15px; >input, select < margin-bottom: 10px; height: 38px; border: 1px solid #ddd; padding-left: 10px; >input < width: 97%; >button, select < width: 100%; >button  
  Select your country United States of America Kenya United Kingdom India China Canada South Africa   Sign Up  
   

Below is the screenshot of the code above:

Take note of the selector «#country» in initializing the select2. We have used it because it is the id of our countries input field.

Bootstrap form with dropdown select and search box

       body < background: #eee; >.signupdiv < background: #fff; border: 1px solid #ddd; box-shadow: 1px 2px 3px #ccc; padding: 10px; margin-top: 100px; >.form-group  
 
Select your country United States of America Kenya United Kingdom India China Canada South Africa  
 
Sign Up 
 
 
   

Below is the screenshot of the code above:

If you were keen, you may have noticed that after adding and initializing select on our dropdown select, its height was reduced compared to the other input fields.

To set it to your custom height, just code the CSS code below add it to your other CSS code in the head section, or in an external CSS file. Remember to height attribute values to your desired ones.

Conclusion

When working with HTML form dropdown select fields, you may get to a point where the select options are too many. In such a scenario, it may be tiring for the users to locate their preferred option.

Adding a search box on top of the dropdown options can save them a great deal, increasing the user experience of your site.

In this article, we have covered a comprehensive step-by-step process on how to design nice-looking forms in HTML and bootstrap framework. With have designed forms with dropdown select options and added a search box to them in order to simplify the finding of the preferred options.

It’s my hope that you have enjoyed this tutorial and found it useful. We strive to keep adding more incredible content on a regular basis. To get notified when we add new, subscribe to our email newsletter.

You may also consider linking to this page from your website or share it to your networks on social media to help reach more people.

Related Articles

Источник

How TO — Search/Filter Dropdown

Learn how to search for items in a dropdown menu with CSS and JavaScript.

Filter Dropdown Menu

Create a Clickable Dropdown

Create a dropdown menu that appears when the user clicks on a button.

Step 1) Add HTML:

Example

Example Explained

Use any element to open the dropdown menu, e.g. a , or

element.

Use a container element (like ) to create the dropdown menu and add the dropdown links inside it.

Wrap a element around the button and the to position the dropdown menu correctly with CSS.

Step 2) Add CSS:

Example

/* Dropdown Button */
.dropbtn background-color: #04AA6D;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
>

/* The search field */
#myInput box-sizing: border-box;
background-image: url(‘searchicon.png’);
background-position: 14px 12px;
background-repeat: no-repeat;
font-size: 16px;
padding: 14px 20px 12px 45px;
border: none;
border-bottom: 1px solid #ddd;
>

/* The search field when it gets focus/clicked on */
#myInput:focus

/* The container — needed to position the dropdown content */
.dropdown position: relative;
display: inline-block;
>

/* Dropdown Content (Hidden by Default) */
.dropdown-content display: none;
position: absolute;
background-color: #f6f6f6;
min-width: 230px;
border: 1px solid #ddd;
z-index: 1;
>

/* Links inside the dropdown */
.dropdown-content a color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
>

/* Change color of dropdown links on hover */
.dropdown-content a:hover

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show

Example Explained

We have styled the dropdown button with a background-color, padding, hover effect, etc.

The .dropdown class uses position:relative , which is needed when we want the dropdown content to be placed right below the dropdown button (using position:absolute ).

The .dropdown-content class holds the actual dropdown menu. It is hidden by default, and will be displayed on hover (see below). Note the min-width is set to 230px. Feel free to change this. Tip: If you want the width of the dropdown content to be as wide as the dropdown button, set the width to 100% (and overflow:auto to enable scroll on small screens).

The search field (#myInput) is styled to fit inside the dropdown menu. We have added a search icon, which is placed to the left inside the search field to indicate that this is actually a search field.

Step 3) Add JavaScript:

Example

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() document.getElementById(«myDropdown»).classList.toggle(«show»);
>

function filterFunction() var input, filter, ul, li, a, i;
input = document.getElementById(«myInput»);
filter = input.value.toUpperCase();
div = document.getElementById(«myDropdown»);
a = div.getElementsByTagName(«a»);
for (i = 0; i < a.length; i++) txtValue = a[i].textContent || a[i].innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) a[i].style.display = «»;
> else a[i].style.display = «none»;
>
>
>

Tip: Go to our CSS Dropdowns Tutorial to learn more about dropdowns.

Tip: Go to our Hoverable Dropdowns to learn more about hoverable dropdowns

Источник