Nice Clear Dropdown List with jQuery and CSS - stb-dropdown

stb-dropdown is a very small jQuery plugin for converting your regular select box into a nice, clean dropdown list that is fully styleable via CSS.

Basic usage:

1. Load the stb.dropdown.min.css in the header for default dropdown styles.

<link rel="stylesheet" href="stb.dropdown.min.css">

2. Add jQuery library and the jQuery stb-dropdown plugin's script at the bottom of the webpage.

<script src="jquery.min.js"></script>
<script src="stb.dropdown.min.js"></script> 

3. Call the function on the select element and done.

$('select').stbDropdown();

4. Modify or override the default CSS rules to create your own styles.

.stb-select-container {
  font-family: Arial, Helvetica, sans-serif;
  border-radius: 4px;
  width: 200px;
  display: inline-block;
  outline: none;
  box-shadow: none;
  border: none;
  border: solid thin rgba(0,0,0,0.24);
  padding: 8px 16px;
  margin: 4px 8px;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  text-align: left;
  cursor: pointer;
}

.stb-select-container ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.stb-select-container .stb-select {
  position: absolute;
  background: white;
  left: -1px;
  top: 30px;
  padding: 8px 16px;
  border: solid thin rgba(0,0,0,0.24);
  border-top: 0;
  z-index: 10;
  width: 200px;
  -webkit-border-bottom-left-radius: 4px;
  -moz-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -webkit-border-bottom-right-radius: 4px;
  -moz-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.stb-select-container span { opacity: 0.54; }

.stb-select-container::after {
  opacity: 0.54;
  content: "v";
  position: absolute;
  right: 8px;
  -ms-transform: scaleY(0.5);
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}

.stb-select-container .stb-select li { opacity: 0.54; }

.stb-select-container .stb-select li:first-of-type { opacity: 0.34; }

.stb-select-container .stb-select li + li { margin-top: 8px; }

Change log:

2015-08-04

• Added Removed Event for Select
• CSS update.

---

This awesome jQuery plugin is developed by shootthebit. For more Advanced Usages, please check the demo page or visit the official website.