javascript

Custom select element 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.

Custom select drop down using html css and javascript
Custom select drop down using html css and javascript
List of content

 

 

Why a custom select element?

You may think, why are we creating a custom select element using Javascript? Because, there is already one in HTML and the features are pretty much what we all need.

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.

Convinced? Alright, let’s move forward.

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

How to plan the look and feel of a custom select element

If we talk about the look and feel, we need to break the structure into a few independent elements. 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 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>

and 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. 

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 element 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 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> 

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!

I have converted it to a reusable select component.
Here is my updated article.

Leave a Comment

eight + one =