Thin Select — Custom JavaScript Dropdown Element

Ciprian on Wednesday, May 8, 2024 in JavaScript
Last modified on Wednesday, May 8, 2024

Let’s create a custom <select> element using vanilla JavaScript and CSS. Thin Select provides a sleek and minimalistic design for <select> dropdowns.

Here is what we’ll build:

See the Pen Thin Select – JavaScript Dropdown Element by Ciprian (@ciprian) on CodePen.

The HTML structure is simple. Wrap your <select> element inside a <div> with the class thin-select. Here’s an example:

<div class="thin-select" style="width:320px;">
    <select>
        <!-- Options go here -->
    </select>
</div>

Let’s style it:

.thin-select {
    position: relative;
}
.thin-select select {
    display: none;
}
.thin-select--selected {
    background-color: DodgerBlue;
    display: flex;
    align-items: center;
}
.thin-select--selected:after {
    position: absolute;
    content: "";
    right: 12px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}
.thin-select--selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
}
.thin-select--items div,.thin-select--selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
}
.thin-select--items {
    position: absolute;
    background-color: DodgerBlue;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}
.select-hide {
    display: none;
}
.thin-select--items div:hover, .same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

The JavaScript code dynamically generates the selected and option elements based on the <select> element’s options.
Event listeners are added to handle opening and closing the dropdown, selecting options, and updating the selected option text.
CSS is used to style the dropdown, including the appearance of the selected and option elements.

CSS Styling

Here’s a detailed breakdown of the styles:

.thin-select: This class is applied to the container of the dropdown. It sets the position to relative and cursor to pointer.
.thin-select--selected: This class is applied to the selected option. It styles the selected option with a border, padding, border-radius, and font size.
.thin-select--items: This class is applied to the dropdown items container. It positions the container absolutely, sets the background colour, adds borders, sets overflow to auto, and applies a maximum height to create a scrollable dropdown. Additionally, it sets the z-index to 1 to ensure it appears above other elements and adds a box shadow for a subtle effect. The display: none property hides the dropdown by default.
.thin-select--items div: This targets the individual dropdown items. It adds padding and hover effect to the dropdown items.
.select-arrow-active::after: This pseudo-element creates an arrow indicator for the selected option when the dropdown is active.

JavaScript Functionality

Now, let’s dive into the JavaScript code:

Initialization: We select all .thin-select elements and loop through them.
Creating Elements: For each dropdown, we create the selected and items elements using document.createElement().
Populating Options: We iterate through the <select> options, excluding the first one, and create a corresponding <div> for each option. These divs are appended to the items container.
Event Listeners:
- Selected Element Click: When the selected element is clicked, we toggle the visibility of the items container and add/remove a class to show/hide the arrow indicator.
- Option Click: When an option is clicked, we update the selected option text and close the dropdown.
Closing All Selects: We have a function closeAllSelects() to close all other dropdowns when one is clicked.
Event Listener for Outside Click: We add an event listener to close dropdowns when clicking outside the dropdown.