Anjan Dutta

Create a custom select dropdown using HTML, CSS and Javascript

Create a custom select dropdown using HTML, CSS and Javascript

Published On: 09-09-2021

This article will describe how to create a custom select dropdown using HTML. CSS and Javascript.

Select is a form element in HTML. We use html select to choose a value from a given set of options.

The default html select dropdown is very efficient and you might think why do we need a custom select option in CSS.

For those who do not know it, it’s a bit difficult to customize a select dropdown using CSS and HTML.

We can customize the look for some parts of a select dropdown. But styling the dropdown option is somwhow a bit challanging.

We can change the default appearance and font, but these changes are not enough.

Then what is the solution?

The solution is to create a custom select dropdown using html, css and javascript.

To create a custom select dropdown, I have used three files, a HTML file layout.html, a Javascript file script.js and a CSS file style.css. Please have a look at below code and their explanations.

Reusable custom select element in javascript

The HTML content

<html>
   <head>
      <script type="text/javascript" src="./script.js"></script>
      <link type="text/css" rel="stylesheet" href="./style.css">
   </head>
   <body>
      <div class="container">
         <input name="select_value" type="hidden" id="selectedValue">
         <div class="display-value" id="displayValue" onclick="toggleOptions(event)">
            <span class="value-text" id="valueText">Select</span>
            <span class="arrow arrow-down" id="arrowControl"></span>
         </div>
         <ul tabindex="0" class="select-container" id="selectContainer" onblur="toggleOptions(event)">
            <li class="select-option" onclick="selected('Opt1')">Opt1</li>
            <li class="select-option" onclick="selected('Opt2')">Opt2</li>
            <li class="select-option" onclick="selected('Opt3')">Opt3</li>
         </ul>
      </div>
   </body>
</html>

To create a custom dropdown from scratch, we need to think of the structure of the dropdown first.

  • First, an outer container that will contain all the sub elements. This is usually a div.

If you take a look in the layout.html file below, the outer most div with a class name container is the one in our case <div class="container"></div>

  • Then, the next block we will create is to display the initial element in it’s closed state. The block is another div html element which has two more sub elements.
<div class="display-value" id="displayValue" onclick="toggleOptions(event)">
    <span class="value-text" id="valueText">Select</span>
    <span class="arrow arrow-down" id="arrowControl"></span>
</div>
  • One of the iner elements (span) will display the selected value
<span class="value-text" id="valueText">Select</span>
  • The second inner element (span) will display the down arrow of the element.
<span class="arrow arrow-down" id="arrowControl"></span>
  • The last block will display a list of all the options in the dropdown. We are using a ul and li combination for this list.
<ul tabindex="0" class="select-container" id="selectContainer" onblur="toggleOptions(event)">
    <li class="select-option" onclick="selected('Opt1')">Opt1</li>
    <li class="select-option" onclick="selected('Opt2')">Opt2</li>
    <li class="select-option" onclick="selected('Opt3')">Opt3</li>
</ul>
In a nut shell, I have used the below elements.
  • A div that looks and behaves like a select element.
  • Ul and li elements to render the options.
  • A hidden input field to store the actual value of the selected element.
  • An outer div that binds all these elements together as one.
  • I have used CSS to create the tiny down arrow. Have a look at the .arrow.arrow-down class.

The CSS content

.display-value {
   height: 39px;
   width: 211px;
   display: flex;
   position: absolute;
   border: 2px solid #666;
}
.value-text {
   display: flex;
   padding-left: 10px;
   font-family: sans-serif;
   align-items: center;
   color: #666;
}
.arrow {
   left: 190px;
   top: 17px;
   position: absolute;
}
.arrow.arrow-up {
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-bottom: 6px solid black;
}
.arrow.arrow-down {
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid black;
}
.select-container {
   width: 211px;
   padding: 0px;
   position: absolute;
   visibility: hidden;
   margin: 0px;
   height: fit-content;
   border: 2px solid #333;
   background-color: #fff;
   list-style-type: none;
   display: block;
}
.select-container:focus {
   outline:none;
}
.select-option {
   display: none;
   height: 40px;
   display: flex;
   padding-left: 10px;
   font-family: sans-serif;
   align-items: center;
   color: #666;
}
.select-option:hover {
   background-color: #eee;
}

Now we must implement the behavior as similar as a html select dropdown.

Below are the list of events that we have to create for the custom select dropdown.

  • While a user clicks on the select dropdown, a list of options should open.
  • If a user clicks outside the selection area, then the options must close.
  • The dropdown must close once a value is selected from the list.
  • The selected value must appear in the select box.

So, we are going to replicate the dropdown behaviour using javascript functions.

The Javascript

var isOpen = false;


function toggleOptions(e) {


   isOpen = !isOpen;
   if (isOpen) {
      document.getElementById('selectContainer').style.visibility = 'visible';
      document.getElementById('selectContainer').focus();
   } else {
      document.getElementById('selectContainer').blur();
      document.getElementById('selectContainer').style.visibility = 'hidden';
   }


}


function selected(val) {
   document.getElementById('valueText').innerHTML = val;
   document.getElementById('selectedValue').val = val;
   toggleOptions();
}

How to use the above code

To use the code, you need to create 3 files in a folder.

  • layout.html — Paste the HTML content in this file.
  • script.js — Paste the JS content in this file.
  • style.css — Paste the CSS content in this file.

And Voila! Double click on layout.html and you will see a working custom select dropdown. The best part is, you can customize the style of the select dropdown using CSS.

Hope you have liked this article. Thanks for reading.

Prev

Next