Beautiful Custom Select Box Plugin With jQuery - custom-select
File Size: | 8.29 KB |
---|---|
Views Total: | 3799 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

custom-select is a jQuery plugin which converts standard select box into beautiful, styleable dropdown list with custom caret symbols.
How to use it:
1. Link jQuery library and the jQuery custom-select plugin to your html page.
<script src="//code.jquery.com/jquery-1.12.1.js"></script> <script src="custom-select.js"></script>
2. Wrap the normal select box into a DIV container with the data-select-box
attribute as follows:
<div data-select-box> <select> <option value="1">Pizza</option> <option value="2">Steak</option> <option value="3">Fish</option> <option value="4">Pasta</option> </select> </div>
3. Style the dropdown list in the CSS
.custom_select { float: left; margin: 0 20px; } .select_opts { background-color: #ECECEC; } .option_title, .option { padding: 8px 20px; } .option_title { font-weight: 600; padding-right: 30px; background-color: #ECECEC; } .option { border-top: 1px solid #FFF; } .option:hover { background-color: #E2E2E2; } .option.current { color: #FFF; background-color: #17bed0; } .option_title::selection { background-color: transparent; } .option_title::-moz-selection { background-color: transparent; }
4. Create pure CSS downwards-pointing and upwards-pointing arrows for the dropdown list.
.arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black; } .custom_select.opened .arrow { border-bottom: 5px solid #17bed0; border-top: none; }
This awesome jQuery plugin is developed by mario-iliev. For more Advanced Usages, please check the demo page or visit the official website.