Custom Select

Easily replace native HTML <select> elements with a customizable dropdown.

---

Features

• Automatic replacement of <select> elements
• Works with multiple selects on a page
• Maintains selected value
• Dispatches change events
• Fully customizable via CSS

---

Installation via jsDelivr

You can include the main JavaScript file directly from jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/gh/Geoloup/customSelect/.js"></script>

Then add your elements: Copier le code <select id="fruits"> <option value="a">Apple</option> <option value="b">Banana</option> <option value="c" selected>Cherry</option> <option value="d">Date</option> </select> Usage By default, all elements are replaced automatically.

// Default: replace all selects
initCustomSelects();
Target Specific Selects

// Replace only selects with class "custom"
initCustomSelects('select.custom');
Change Events
javascript
Copier le code
const select = document.getElementById('fruits');
select.addEventListener('change', () => {
  console.log('Selected value:', select.value);
});

CSS Styling

The JS file injects default CSS, but you can override with your own:

/* Container */
.custom-select-wrapper {
  width: 250px;
  margin-bottom: 10px;
}

/* Visible dropdown */
.custom-select {
  background-color: #222;
  color: #fff;
  border: 1px solid #444;
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  position: relative;
}

/* Open state arrow */
.custom-select.open::after {
  transform: translateY(-50%) rotate(-135deg);
}

/* Options container */
.custom-options {
  border: 1px solid #444;
  border-top: none;
  border-radius: 0 0 4px 4px;
  background-color: #333;
  max-height: 200px;
  overflow-y: auto;
  display: none;
  position: absolute;
  width: 100%;
  z-index: 1000;
}

/* Option items */
.custom-options div {
  padding: 10px;
  cursor: pointer;
  color: #fff;
}

.custom-options div:hover {
  background-color: #555;
}

/* Show options when open */
.custom-select.open + .custom-options {
  display: block;
}
CSS Classes Overview
.custom-select-wrapper → container around select

.custom-select → visible dropdown showing the selected value

.custom-select.open → open state

.custom-options → container for options

.custom-options div → individual options

Notes

Original is hidden but still usable in forms Works with dynamically added selects Clicking outside the dropdown closes all open selects