Choose a Custom Style Dropdown Made with Vanilla JS | cSelect

cSelect is a pure JavaScript plugin that allows you to convert a normal select element into a div-based element that you can format as desired. The new selection will inherit any properties included in the original selection such as disabled, selected, values, and text.

It also updates the old selection with the newly selected option so that the request is served with the appropriate values.

Must Read – A Javascript Library That Replaces the Original Select Elements with Customizable Dropdowns

How to make use of it:

1. Import cSelect.

import CSelect from './cselect.js';

2. Turn the checkout select item into a custom dropdown list.

<select class="custom-select" name="testSelect" id="c-select" placeholder="Please select an option">
  <option disabled selected value> -- select an option -- </option>
  <option value="walls">The walls were shaking</option>
  <option value="earth">The earth was quaking</option>
  <option disabled value="mind">My mind was aching</option>
  <option value="cause-you">Cause you</option>
  <option value="shook">SHOOK ME ALL NIGHT LONG!</option>
</select>
const select = document.querySelector('.custom-select');
const cSelect = new CSelect(select, {
      // options here
});

3. Determine if you want to enable open/close animation.

const cSelect = new CSelect(select, {
      animated: true,
});

4. Determine if you want to enable the direct search function.

const cSelect = new CSelect(select, {
      search: true,
});

5. Apply custom styles to the dropdown menu.

.cSelect {
  position: relative;
}

.cSelect * {
  box-sizing: border-box;
}

.cSelect:focus {
  outline: 2px solid #2686f4;
}

.cSelect__default {
  display: flex;
  align-items: center;
  border-radius: 3px;
  font-size: 14px;
  height: 50px;
  padding: 16px 2em;
  background: #fff;
  box-shadow: 0px 1em 2em -1.5em rgba(0, 0, 0, 0.5);
  cursor: pointer;
}

.cSelect__label-arrow {
  position: relative;
  margin-left: auto;
}

.cSelect__label-arrow::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 50%;
  width: 8px;
  height: 8px;
  border-top: 2px solid #999;
  border-right: 2px solid #999;
  transform: translateY(-65%) rotate(135deg);
}

.cSelect__drop {
  position: absolute;
  width: 100%;
  height: 0;
  max-height: 300px;
  left: 0;
  top: 57px;
  transition: height, 0.25s;
}

.cSelect__results {
  height: 100%;
  overflow-y: auto;
}

.cSelect__search {
  position: relative;
  height: 0;
  overflow: hidden;
  outline: none;
}

.cSelect__search--animated {
  transition: height, 0.25s;
}

.cSelect__drop--open .cSelect__search {
  height: 50px;
}

.cSelect__search-input {
  width: 100%;
  padding: 16px 2em;
  background-color: #fff;
  font-size: 14px;
  height: 50px;
  border: none;
}

.cSelect__search-input:focus {
  border: 2px solid #2686f4;
}

.cSelect__search-icon {
  position: absolute;
  right: 1.75em;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
  width: 16px;
  height: 16px;
}

.cSelect__search-icon::before,
.cSelect__search-icon::after {
  content: '';
  display: block;
  box-sizing: border-box;
  transition-property: background-color, border-color;
  transition-duration: 0.25s;
}

.cSelect__search-icon::before {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #999;
}

.cSelect__search-icon::after {
  margin: 0 auto;
  width: 2px;
  height: 6px;
  background-color: #999;
}

.cSelect__search-input:focus ~ .cSelect__search-icon::before {
  border-color: #9226f4;
}

.cSelect__search-input:focus ~ .cSelect__search-icon::after {
  background-color: #9226f4;
}

.cSelect__option {
  padding: 16px 2em;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  cursor: pointer;
  font-size: 14px;
  min-height: 17px;
}

.cSelect__option:hover {
  background-color: rgb(236, 236, 236);
}

.cSelect__option.selected {
  color: #fff;
  background-color: #9226f4;
}

/* needs to be after selected */
.cSelect__option.disabled {
  color: #c6c6c6;
  background-color: #f8f8f8;
  cursor: not-allowed;
}

Must Read – jQuery Plugin for Bootstrap Navbar With Multiple Dropdowns | Twitter BS4 Responsive Navbar

Settings

In the current version, the custom plugin’s behavior is very limited and you can modify the following optional properties:

OptionTypeDefaultDescription
animatedbooleantrueToggles expanding dropdown and search items with animation
searchbooleantrueAllows searching available options (including disabled ones)

Read More – 

Stylish Select Dropdown Replacement List Plugin with jQuery
JQuery Multi-Select Plugin Based on Twitter Bootstrap


See Demo And Download

Official Website(Vigorski): Click Here

This superior jQuery/javascript plugin is developed by Vigorski. For extra Advanced Usage, please go to the official website.

Share