Form Select Element Replacement Plugin - Mighty Form Styler

Mighty Form Styler is a jquey plugin for improving your default form select element experience that makes it easy to beautify and customize your select elements with CSS and jQuery. 

How to use it:

1. Markup

<form>
<select id="optgroup-select" name="group-select">
<option value="opt0">option 0</option>
<optgroup label="group 1">
<option value="opt1">option 1</option>
<option value="opt2">option 2</option>
<option value="opt3">option 3</option>
</optgroup>
<optgroup label="group 2">
<option value="opt4">option 4</option>
<option value="opt5">option 5</option>
<option value="opt6">option 6</option>
</optgroup>
<option value="opt7">option 7</option>
</select>
</form>

2. Include jQuery library and mfs.js

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script src="jquery.mfs.js"></script> 

3. Call the plugin

<script>
	$(document).ready(function(){
		$('form').mfs();
	});
</script>

4. Customize your form with CSS

.mfs-container {
	position: relative; 
	width: 130px;
	color: #666666; 
	font-family: Helvetica, Arial; 
	font-size: 12px;
}
.mfs-container select {display: none;}
.mfs-options {
	position: absolute; 
	width: 100%; 
	padding: 0; 
	margin: 0; 
	list-style-type: none; 
	background: #ffffff; 
	border: 1px solid #cccccc;
	border-radius: 5px;
	z-index: 10;
}
.mfs-options li a {
	display: block; 
	padding: 5px 5px; 
	text-decoration: none; 
	color: #666666;
}
.mfs-optgroup-option {
	padding-left: 10px;
}
.mfs-options li.mfs-optgroup {
	padding: 4px 5px;
	color: #999999;
}
.mfs-options li.selected {
	background-color: #666666; 
}
.mfs-options li.selected a {
	color: #ffffff;
}
.mfs-options li.active {
	background-color: #cccccc;
}
a.mfs-selected-option {
	display: block; 
	padding: 5px 5px; 
	text-decoration: none; 
	background: #ffffff; 
	border: 1px solid #cccccc; 
	border-radius: 5px; 
	color: #666666;
}
a.mfs-selected-option span {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 25px;
	padding: 5px 0;
	border: 1px solid #cccccc;
	border-radius: 5px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	
	background-image: linear-gradient(bottom, rgb(230,230,230) 36%, rgb(244,244,244) 68%);
	background-image: -o-linear-gradient(bottom, rgb(230,230,230) 36%, rgb(244,244,244) 68%);
	background-image: -moz-linear-gradient(bottom, rgb(230,230,230) 36%, rgb(244,244,244) 68%);
	background-image: -webkit-linear-gradient(bottom, rgb(230,230,230) 36%, rgb(244,244,244) 68%);
	background-image: -ms-linear-gradient(bottom, rgb(230,230,230) 36%, rgb(244,244,244) 68%);
}

a.mfs-selected-option span:after {
	display: inline-block;
	position: absolute;
	top: 10px;
	left: 8px;
	width: 0;
	height: 0;
	border-top: 4px solid #999999;
	border-right: 4px solid transparent;
	border-left: 4px solid transparent;
	content: "";
}

5. Options

'dropdownHandle'    : '<i class="icon-chevron-down"></i>', // - Alternative HTML to use in the handle (i.e. fontawesome icons)
'enableScroll'      : false,        // Set to true to enable scrolling in dropdown list
'maxHeight'         : 200,          // Set the max height for the dropdown list in pixels (enableScroll needs to be set to true)
'autoWidth'         : false,        // Set to true to adjust dropdown list width to widest option
'disableTouch'      : false         // Set to true to use native select dropdown on mobile and touch devices
'multipleTitle'     : 'selected'    // Set the title used for the selected option 'x selected', defaults to 'selected'
'multipleTitleNone  : false         // Set alternative title for selected option on multi selects when no options are selected
'mutlipleAutoClose  : true          // Set to false to keep a multi select open when selecting an option

Change Log:

v1.1.0 (2016-08-25)

• Fixed: The last initialization of mfs overwrites the settings of all earlier initialized mfs-instances.
• Fixed issue with multipleAutoClose not working

v1.0.10 (2014-06-08)

• Added active class to container when dropdown is open/active
• Added an optional alternative title when the selected value is an empty string

v1.0.8 (2014-06-06)

• Fixed styling new (injected) select elements on refresh

v1.0.7 (2014-01-13)

• Fixed refreshing selected values on touch devices

v1.0.6 (2014-01-10)

• Fixed issue with the change event when a select has the multiple attribute
• Added multipleTitleNone and multipleAutoClose config options for multi select elements

v1.0.5 (2014-01-10)

• Fixed issue: Make it work with the multiple attribute on a select element

 

---

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