Thin Select — Custom JavaScript Dropdown Element

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:

1. Initialization: We select all .thin-select elements and loop through them.
2. Creating Elements: For each dropdown, we create the selected and items elements using document.createElement().
3. 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.
4. 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.
5. Closing All Selects: We have a function closeAllSelects() to close all other dropdowns when one is clicked.
6. Event Listener for Outside Click: We add an event listener to close dropdowns when clicking outside the dropdown.

Pretty simple, right?

Related posts

May 17, 2022

How to declare a global variable inside a jQuery function

May 17, 2022

JavaScript Terminal

August 9, 2022

Code Golfing Tips & Tricks: How to Minify your JavaScript Code