Custom Single Select Dropdown Box In Vanilla JavaScript | FancySelect

FancySelect is a simple alternative to the original single selected HTML elements written in Vanilla ES6.

single select dropdown, drop down list html, bootstrap select 2 dropdown, multiple select dropdown, how to display selected value of dropdownlist in html

Why not just design a native select element with CSS?

Do just that if it’s enough for your use case. The main reason I created this project was that I needed a drop-down list of icons that didn’t suck.


  • Zero Dependencies
  • Very easy to use
  • Customizable
  • Code support
  • Fully accessible
  • Works on all modern browsers (does not support IE)
  • No multi-select support (not accessible)

How to make use of it:

1. Import the fancyselect.min.css and JavaScript fancyselect.min.css stylesheet.

<script type="text/javascript" src="fancyselect.min.js"></script>
<link rel="stylesheet" type="text/css" href="fancyselect.min.css" />

2. The library will automatically apply custom styles to the original selection elements within the document.

<select id="default">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>

3. Apply your own styles to the selection.

<select id="custom">
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
.custom {
  --fsb-border: 0;
  --fsb-radius: 2em;
  --fsb-color: #fff;
  --fsb-background: #2F86A6;
  --fsb-font-size: 1em;
  --fsb-shadow: 0 1px 1px rgba(0, 0, 0, .1);
  --fsb-padding: .75em 1.5em;
  --fsb-arrow-padding: 1.5em;
  --fsb-arrow-size: .5em;
  --fsb-arrow-color: currentColor;
  --fsb-icon-color: currentColor;
  --fsb-list-height: 200px;
  --fsb-list-border: var(--fsb-border);
  --fsb-list-radius: .75em;
  --fsb-list-color: var(--fsb-color);
  --fsb-list-background: #34BE82;
  --fsb-hover-color: var(--fsb-color);
  --fsb-hover-background: #2FDD92;

4. Add icons to the options.

<select id="default">
  <option data-icon="1.svg">Option 1</option>
  <option data-icon="2.svg">Option 2</option>
  <option data-icon="3.svg">Option 3</option>

5. Adding new options to the custom item.

const mySelect = document.getElementById('my-select');
const newItems = ['Option4', 'Option5', 'Option6'];
newItems.forEach(item => {
  const option = document.createElement('option');
  option.textContent = item;
// Update the custom select

6. Disable the original selection element.

mySelect.disabled = true;

Custom Single Select Box, FancySelect Plugin/Github, html dropdown selected

See Demo And Download

Official Website(mdbassit): Click Here

This superior jQuery/javascript plugin is developed by mdbassit. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…