jQuery Plugin For Custom Select Menus
File Size: | 10KB |
---|---|
Views Total: | 3421 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
A simple and clean jQuery plugin that helps you easily create custom select menus for your website or web application.
You might also like:
- Form Select Element Replacement Plugin - Mighty Form Styler
- Default Checkbox Replacement Plugin - jQuery prettyCheckable
- Standard Select Form Replacement Plugin - Selectik
- Select Boxes Replacement Plugin - Select2
- Simple jQuery Plugin To Beautify Your Select Boxes - selectskin
- jQuery Multiple Select Element Replacement Plugin - selectlist
- Beautiful Select Element Replacement Solution with jQuery and CSS3
- Simple Stylizable Select Input Plugin with jQuery - Brute Select
- jQuery Plugin For Customizable Select Box - selectify
How it works :
This will take a regular select menu such as this:
<select name="color-menu" id="my-color-menu"> <option>Choose a color...</option> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> </select>
And turn it into this:
<div class="custom-select-menu" tabindex="0" id="my-color-menu"> <label>Choose a color...</label> <ul style="display: none;"> <li data-option-value="" class="selected">Choose a color...</li> <li data-option-value="red">Red</li> <li data-option-value="green">Green</li> <li data-option-value="blue">Blue</li> </ul> </div> <input type="hidden" name="color-menu" value="" />
How to use it :
1. Include the lastest jQuery Library and custom-select-menu-jquery.js on your web page
<link href="https://www.jqueryscript.net/css/top.css" rel="stylesheet" type="text/css"> <script src="custom-select-menu-min.jquery.js"></script>
2. HTML Markup Structure
<form id="my-form"> <select name="color-menu" id="my-color-menu"> <option>Choose one...</option> <option value="red">Red</option> <option value="orange">Orange</option> <option value="yellow">Yellow</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="indigo">Indigo</option> <option value="violet">Violet</option> </select> </form>
3. The CSS
.custom-select-menu { display: inline-block; margin-bottom: 8px; outline: none; position: relative; } .custom-select-menu label { border: 2px solid #888; border-radius: 4px; color: #888; display: inline-block; font-weight: bold; padding: 10px 32px 10px 10px; position: relative; -moz-user-select: none; -ms-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } .custom-select-menu label.selection-made { color: #000; } .custom-select-menu label:after { border-top: 6px solid #888; border-right: 6px solid transparent; border-left: 6px solid transparent; content: ''; position: absolute; right: 10px; top: 16px; } .custom-select-menu label.opened { border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .custom-select-menu:focus label { border-color: #000; } .custom-select-menu ul { background: #fff; border: 2px solid #000; border-radius: 4px; border-top-right-radius: 0; border-top-left-radius: 0; list-style: none; left: 10px; margin: 0 -10px; max-height: 200px; overflow-x: hidden; overflow-y: scroll; position: absolute; top: 40px; z-index: 2; } .custom-select-menu li { background-color: #fff; cursor: pointer; padding: 7px 10px; } .custom-select-menu li:hover, .custom-select-menu .selected { background-color: rgba(0,0,0,.05); } .custom-select-menu .results { overflow: scroll; max-height: 150px; } .custom-select-menu label { width: 200px; } .custom-select-menu ul { width: 242px; }
4. Call the plugin
<script> $(document).ready(function() { $('select').customSelectMenu(); }); </script>
Change Log:
v1.0.3 (2013-11-03)
- Updated plugin version from 1.0.2 to 1.0.3 after merging bug fix for issue
v1.0.2 (2013-04-06)
- Better event delegation and cleaned up/simplified code a bit
v1.0.1 (2013-03-08)
- Fixed: Pressing return/enter key on a closed menu should not toggle the label class
This awesome jQuery plugin is developed by derekpcollins. For more Advanced Usages, please check the demo page or visit the official website.