dropdown with search box

Drop-Down With Search Box Using HTML and CSS

Drop-Down With Search Box Using HTML and CSS

A search bar with a dropdown menu combines a text input field and a dropdown menu as a user interface (UI) element. With this setup, users are able to concurrently enter search keywords and choose from a list of suggested possibilities. According to the user’s input, the dropdown frequently shows a dynamic list of recommendations or well-liked search phrases.

By speeding up the search process and lowering the effort necessary to find the desired information, this functionality can enhance the entire user experience.

50+ HTML, CSS and JavaScript Projects With Source Code

Drop-Down With Search Box Using HTML and CSS

Drop-down search is a beginner’s project, and for it, we’ll use the fundamental ideas of HTML and CSS. You can discover numerous list items using the fewest characters in the drop-down using the search box. This project is efficient and manageable. It offers a positive user experience on the website because it makes it simple to search through the list.

19 CSS Dropdown Menu (Demo + Code)

You will be comfortable with the drop-down search concepts by the time this article is finished. This project will be constructed entirely from scratch. Along with learning about drop-down menus, we will also learn about searching. We will design a search box and show you how to use it to allow users to conduct searches.

Step1: HTML for Drop-Down Search

<h1>Dropdown with searchable text</h1>
<form>
    <label for="myHouse">Choose your magical house:</label>
    <input list="magicHouses" id="myHouse" name="myHouse" placeholder="type here..." />
    <datalist id="magicHouses">
  <option value="Gryfindor">
  <option value="Hufflepuff">
  <option value="Slytherin">
  <option value="Ravenclaw">
  <option value="Horned Serpent">
  <option value="Thunderbird">
        <option value="Pukwudgie">
  <option value="Wampus">

</datalist>
</form>

We’ll begin by adding the project’s structure, but first we’ll need to include certain items inside the link, such as the fact that we’ve used multiple CSS and javascript files, which we’ll need to link up inside our HTML file.

//Head Section
<link rel="stylesheet" href="style.css">
//Body Section
<script src="script.js"></script>

Here is the layout of our drop-down search. We will include the header for our “dropdown search” using the h1 tag selector. Now, we’ll build a form using the <form> tag and then add the label for our input box inside of it using the label tag. We will first build the input for our dropdown using the input tag with the type “list,” and then we will create the options for our dropdown menu using the option tag. We will include the ability to search inside our form in addition to the input field.

The structure for our drop-down search has been introduced. Let’s examine our structure.

HTML Output:

Drop-Down With Search Box Using HTML and CSS

Step2: CSS for Drop-Down Search

We will apply different styling to the various elements inside our drop-down menu now that we have added the primary styling to our drop-down search using the cascading style sheet. We’ll start by taking a look at our code.

/* Only for styling, not required for it to work */
body {
    background-color: lightsteelblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h1 {
    font-family: "Sacramento", cursive;
    font-size: 3rem;
    color: #fff;
    font-family: "Berkshire Swash", cursive;
}

form {
    max-width: 40vw;
    display: flex;
    flex-direction: column;
}

form label {
    font-family: "Open Sans", sans-serif;
    font-size: 1.2rem;
    margin-bottom: 12px;
}

form input {
    border: 2px solid lightslategray;
    height: 40px;
    border-radius: 3px;
    padding: 5px;
    font-size: 1rem;
}

form input:focus {
    outline: none;
    border: 2px solid darkslategray;
}

Step1: We will style the backdrop of our body by using the body tag selector. The background will be set to “light blue” using the background-color property, and the display will be set to “flex” using the display property. The flex direction will be set to column using the flex-direction property, and the items will be centred using the align item property.

body {
    background-color: lightsteelblue;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Drop-Down With Search Box Using HTML and CSS

Step2: Now, we’ll set the font family to “Sacramento” using the tag selector (h1), and we’ll set the font size to 3 rem using the font size attribute. Our heading’s font colour will be set to “white” using the font colour attribute, and the font style will be “Berkshire Swash.”

h1 {
    font-family: "Sacramento", cursive;
    font-size: 3rem;
    color: #fff;
    font-family: "Berkshire Swash", cursive;
}

Drop-Down With Search Box Using HTML and CSS

Step3: We are now going to style the form component for our drop-down search. The maximum width will be set to “40 vw” using the form tag selector. The display property will be used to set the display to “flex” and the flex direction to “column.”

Create Portfolio Website Using HTML and CSS (Source Code)

We will now style our form label using the tag selector for the form label. We’ll change the font family to open sans, set the font size to 1.2 rem, and set the bottom margin to 12 px using the margin attribute.

form input {
    border: 2px solid lightslategray;
    height: 40px;
    border-radius: 3px;
    padding: 5px;
    font-size: 1rem;
}

form input:focus {
    outline: none;
    border: 2px solid darkslategray;
}

Final Output Of Drop-Down With Search Box:

 Live Codepen Preview:

Now We have Successfully created our Dropdown with Search box. You can use this project for your personal webpage and We hope you understood the project, If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code by : @Ananya Neogi


Leave a Reply