Custom Select Dropdown
CSS / HTML / jQuery

How to Make a Custom Select Dropdown using CSS & JS

Custom Select Dropdown

Custom Select Dropdown: Are you looking for a tutorial where you can learn how to create a Custom Select Dropdown? Then you should check this tutorial.

Here I will explain everything in detail to make you understand about making a Custom Select Dropdown using CSS & JS. Optionally I will write some more JS to help you get the selected value of this Custom Select Dropdown. So you can skip that JS part if you want to write your own JS to get the selected value.

Let’s get started !

First, we will create the main container with the class custom-dropdown-box which will contain all the elements of our Custom Select Dropdown.

<div class="custom-dropdown-box"></div>

Inside the main container custom-dropdown-box that we have just created, we will create a div called custom-select which will contain the default text of our dropdown with the class name default-text and an arrow icon with a class name caret.

<div class="custom-select">
  <span class="default-text">Select</span>
  <span class="caret">▼</span>
</div>

The last thing we need to do in the HTML part of this task is to create a dropdown menu list which will be displayed when we will open the dropdown. So after the closing tag of the custom-select div we will create a ul li list and give a class “custom-dropdown-menu” to the ul tag.

<ul class="custom-dropdown-menu">
  <li>S-1</li>
  <li>S-2</li>
  <li>S-3</li>
</ul>

Now let’s move on to the CSS part. We just need to add the given CSS for the proper styling of our Custom Select Dropdown.

.custom-dropdown-box {
  box-sizing: border-box;
  font-family: arial, sans-serif;
  border: 1px solid #ccc;
  width: 200px;
  font-size: 14px;
  min-height: 25px;
}
.custom-dropdown-box .caret {
  float: right;
}
.custom-dropdown-box .custom-select {
  padding: 5px;
  color: #999;
  cursor: pointer;
}
.custom-dropdown-box .custom-dropdown-menu {
  margin: 0;
  padding-left: 0;
  cursor: pointer;
  background-color: white;
  display: none;
}
.custom-dropdown-menu > li {
  list-style: none;
  padding: 5px;
  color: #40aefd;
}
.custom-dropdown-menu > li:hover {
  background-color: #f1f1f1;
}

Now we need to write little JS to toggle our dropdown properly. Make sure to include the jQuery library before adding the given code. Because we will use jQuery for this.

$('.custom-dropdown-box').on('click', function(e) {
  e.stopPropagation();
  $(this).find('.custom-dropdown-menu').toggle();
});

$(document).click(function() {
  $('.custom-dropdown-menu').hide();
});

Now you can check your dropdown.

Get the selected value of Custom Select Dropdown

As I told you at the beginning of this tutorial that I will also help you to get the selected value of this dropdown using jQuery. But this is totally optional if you want to write JS in your own way.

So now we will get the selected value of our Custom Select Dropdown using jQuery. To do this task the first thing we will need to do is add a data-value attribute with the different values for all the li tags of “custom-dropdown-menu” like the given HTML.

<ul class="custom-dropdown-menu">
  <li data-value="S-1">S-1</li>
  <li data-value="S-2">S-2</li>
  <li data-value="S-3">S-3</li>
</ul>

Now add the given jQuery code.

$('.custom-dropdown-menu').on('click', 'li', function() {
  var selectedVal = $(this).data('value');
  let defaultText = $(this).parent().parent().find('.default-text');
  defaultText.html(selectedVal);
  if($('.custom-dropdown-menu li').first().data('value') != 'Select') {
    var li = '<li data-value="Select">Select</li>';
    $('.custom-dropdown-menu').prepend(li);
  }else if(defaultText.html() == 'Select') {
    $('.custom-dropdown-menu li').first().remove();
  }
});

Above jQuery code will first get the value of data-value attribute of the selected option and change the default text “Select” of the dropdown whenever you choose any option from the dropdown menu list.

The second thing it will make sure to display the default text “Select” when any other option from the list is not selected.

The last thing it will do is display the default text “Select” at the beginning of the dropdown menu list in case of any other option is selected.

We are done ! In case you need more help on it, ask in comments below.

Thanks for visiting.

Author

I am a Full Stack Web Developer. I have more than 8 years of experience in the web design and development industry.

Leave a Reply

Your email address will not be published. Required fields are marked *