Thin Select — Custom JavaScript Dropdown Element

on in JavaScript
Last modified on

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;">
        <!-- Options go here -->

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;
} {
    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

Leave a Reply

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