Quickly style a select option in CSS: Runs in 5 mins

Select is a form element in HTML. I am going to tell you in this article how to style a select option in CSS.

You might think what is so special about styling a select option in CSS. For those who do not know it, it’s a bit difficult to do so.

We can change styling for some parts of a select element tbh. But the real problem comes when we try to re-design the dropdown option list. See this article for reference Styling with CSS.

It doesn’t work because the internal structure of a select element is complex. We can change the default appearance and font, but these changes are not enough to align the design with modern controls.

In simple words, CSS can not change the dropdown menu list’s design.

Then what is the solution?

The solution is to create a custom select element than to style a select option in CSS explicitly.

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.

Style a select option in CSS

If we talk styling a select option in CSS, we need to break the structure into a few independent HTML 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.

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

Copy
<span class="value-text" id="valueText">Select</span>

and the second inner element (span) will display the down arrow of the element.

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

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

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

Expected behavior of the select dropdown

To style a select option in CSS, we must implement the behavior as similar as a select dropdown. In this article, I have used pure javascript, no jQuery or any other library. Below are the list of actions 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 of custom select element

To style a select option in CSS, 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

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

The CSS content

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

The Javascript content

Copy
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 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 select dropdown. The best part is, you can customize the style the select option like anything you want in CSS.

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