Press "Enter" to skip to content

Custom select element using HTML, CSS and Javascript

Custom select dropdown using HTML, CSS and Javascript

From the title and image, you already know what we are going to discuss in this article. Yes, it is custom select element using HTML, CSS and Javascript.

List of content

What and Why?

But you may think, Okay, isn’t there already a select element in HTML? Then why are we even thinking of creating a custom select element using javascript?

Yes, there is one. But that one doesn’t do justice to the user experience of your application.

For example, you can’t give it a modern look and feel. And also, the latest frameworks have so much to offer but, our HTML select element is pretty far behind to absorb all those awesomeness.

Hope you are 1% more convinced now? Alrighty then let’s move forward.

Next comes the things that I had to keep in mind while thinking of the element structure.

Look and feel of a custom select element (UI)

If we talk about the look and feel, 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. 

Behavior of a custom select element (UX)

For the element behaviour, I have used pure javascript, no jQuery or any other library. Below are the behaviour things that I have taken care of while developing this element.

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

File Structure

I have used three files to create this element, layout.html, script.js and style.css. Please have a look at below code and their explanations.

layout.html

 <html>
   <head>
      <script type="text/javascript" src="./script.js"></script>
      <link type="text/css" rel="stylesheet" href="./style.css">
   </head>
   <body>
      <div>
         <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> 

style.css

 .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;
}

 

script.js

 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();
} 

Hope you have liked this post. Please comment below if you want to read more similar articles. Thank you!

5 Shares
Share
Tweet
Pin
Share