Designing a custom select dropdown with HTML, CSS, and JavaScript

Select dropdowns are an essential part of web forms. They allow users to select a value from a list of options. However, the default select dropdown provided by the browser doesn't always fit the design and style of the website. In this blog, we will be going over how to design a custom select dropdown using HTML, CSS, and JavaScript.

Step 1: HTML Markup

The first step is to create the HTML markup for the custom select dropdown. We will be using a combination of div, span, and ul/li tags to create the dropdown. Here's an example of the HTML markup we'll be using:

<div class="custom-select">
  <span class="selected-option">Select an Option</span>
  <ul class="options">
    <li data-value="option1">Option 1</li>
    <li data-value="option2">Option 2</li>
    <li data-value="option3">Option 3</li>
    <li data-value="option4">Option 4</li>
  </ul>
</div>

In the above code, we have created a div with a class of "custom-select." Inside the div, we have a span tag with a class of "selected-option" which will display the selected option. We also have a ul tag with a class of "options" which will contain the list of options. Each option is represented by a li tag with a data-value attribute containing the value of the option.

Step 2: CSS Styling

The next step is to style the custom select dropdown using CSS. Here's an example of the CSS we'll be using:

.custom-select {
  position: relative;
  width: 200px;
  margin: 0 auto;
}

.selected-option {
  display: block;
  padding: 10px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  cursor: pointer;
}

.options {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  max-height: 150px;
  overflow-y: auto;
  background-color: #fff;
  border: 1px solid #ccc;
  border-top: none;
  z-index: 1;
  display: none;
}

.options li {
  display: block;
  padding: 10px;
  cursor: pointer;
}

.options li:hover {
  background-color: #f7f7f7;
}

In the above code, we have set the position of the custom select dropdown to relative so that we can position the options list. We have also set a width for the dropdown and centered it using margin: 0 auto.

For the selected option, we have set the display to block and added some padding and a background color. We have also added a border and set the cursor to pointer so that the user knows it's clickable.

For the options list, we have set the position to absolute and positioned it below the selected option using top: 100%. We have also set a width and a max-height with overflow-y: auto so that the list can be scrolled if it exceeds the maximum height. We have also set a background color and a border.

For each option, we have set the display to block and added some padding and a cursor so that the user knows it's clickable. We have also added a hover effect to change the background color of the option when the user hovers over it.

Step 3: JavaScript Functionality

The final step is to add JavaScript functionality to the custom select dropdown. Here's an example of the JavaScript we'll be using:

const customSelect = document.querySelector('.custom-select');
const selectedOption = customSelect.querySelector('.selected-option');
const optionsList = customSelect.querySelector('.options');
const options = optionsList.querySelectorAll('li');

selectedOption.addEventListener('click', () => {
  optionsList.style.display = optionsList.style.display === 'block' ? 'none' : 'block';
});

options.forEach(option => {
  option.addEventListener('click', () => {
    selectedOption.textContent = option.textContent;
    optionsList.style.display = 'none';
  });
});

In the above code, we first select the custom select dropdown, the selected option, and the options list. We then add a click event listener to the selected option. When the selected option is clicked, we toggle the display of the options list between block and none.

We also add a click event listener to each option. When an option is clicked, we set the text content of the selected option to the text content of the clicked option. We also hide the options list by setting its display to none.

Conclusion:

In this blog, we have gone over how to design a custom select dropdown using HTML, CSS, and JavaScript. By following the steps outlined in this blog, you can create a custom select dropdown that fits the design and style of your website. Remember to test your code across different browsers and devices to ensure it works as intended.