Nice Clear Dropdown List with jQuery and CSS - stb-dropdown
File Size: | 7.26 KB |
---|---|
Views Total: | 4236 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.