Custom Select Tag DropDown with CSS and JavaScript

In this tutorial we will see how to make a Custom Select Tag DropDown with CSS and JavaScript. Pure CSS and Vanilla JavaScript is used to make this custom select menu, CSS code and JavaScript code is given.

Table of Contents

HTML Code

Take a look at the HTML code given below.


<div class="drop-down">
    
<select onmousedown='dropDown(event,this)'>
<option id="option">Happy</option>    
</select>
    
<div class="menu" id="menu">
<i id="Happy" onclick="item(this)" class="far fa-grin"></i>    
<i id="Sad" onclick="item(this)" class="far fa-frown"></i>    
<i id="Angry" onclick="item(this)" class="far fa-angry"></i>    
</div>    
    
</div>

CSS Code

CSS code is given below.


<style>      
body
{
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: #ddd;
}
select
{
    width: 200px;
    height: 50px;
    border-radius: 20px;
    padding: 10px 15px;
    cursor: pointer;
    background-color: #fff;
    border: 0;
    box-sizing: border-box;
    font-weight: bold;
    font-size: 15px;
}
.drop-down
{
    position: relative;
}
.menu
{
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    height: 50px;
    border-radius: 20px;
    padding: 5px;
    cursor: pointer;
    background-color: #fff;
    box-sizing: border-box;
    margin-top: 25px;
    text-align: center;
    display: none;
}
.menu i
{
    display: inline-block;
    border-radius: 20px;
    font-size: 35px;
    background-color: yellow;
    margin: 4px;
}
.menu::before
{
    content: '';
    background-color: #fff;
    position: absolute;
    bottom: 100%;
    right: 10%;
    height: 40px;
    width: 40px;
    border-radius: 50%;
}
.menu::after
{
    content: '';
    background-color: #fff;
    position: absolute;
    bottom: 50%;
    right: 10%;
    height: 40px;
    width: 40px;
    border-radius: 50%;
    z-index: -1;
}
</style>

JavaScript Code

Take a look at the JavaScript Code given below.


<script>
var a=1;
function dropDown(e)
{
e.preventDefault();
if(a==1)
{
document.getElementById('menu').style.display='block';
a=0;    
}
else
{
document.getElementById('menu').style.display='none';
a=1;    
}    
}

function item(x)
{
var content=x.id;
document.getElementById('option').innerHTML=content;
document.getElementById('menu').style.display='none';
if(a==1)
{
 a=0;    
}
else
{
a=1;    
}
}
</script>

One function is used to close the dropdown and other is used to change the value of select tag and then close the dropdown.

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Custom Select Tag DropDown with CSS and JavaScript.