Simple Stylizable Select Input Plugin with jQuery - Brute Select

Brute Select is an easy-to-use and simple jQuery plugin that makes the standard Html select input element customizable with javascript and CSS.

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
• jQuery Plugin For Custom Select Menus
• jQuery Multiple Select Element Replacement Plugin - selectlist
• Beautiful Select Element Replacement Solution with jQuery and CSS3

Basic Usage:

1. Include jQuery and this plugin as scripts on your html page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="brute-select.min.js"></script>

2. The HTML

<select id="demo-select">
<option value="value">Popular jquery plugins websites</option>
<option value="other value">http://www.jQuery.com</option>
<option value="other value">http://plugins.jquery.com</option>
<option value="other value">http://www.jQueryui.com</option>
<option value="other value">http://www.google.com</option>
<option value="other value">http://www.jQueryScript.Net</option>
<option value="other value">http://www.yourwebsite.com</option>
</select>

3. The CSS

.brute-select {
	display: inline-block;
	position: relative;
	border: 1px solid #ccc;
	border-radius: 5px;
	background: #fff;
	vertical-align: middle;
}

.brute-select-focus {
	border-color: #09c;
	box-shadow: 0 0 5px #3cf;
}

.brute-select-select {
	filter: alpha(opacity=0);
	opacity: 0;
	border: none;
	padding: 0 15px 0 0;
	margin: 0;
	display: block;
	height: 20px;
	position: relative;
	z-index: 1;
}

.brute-select-title {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	padding: 0 15px 0 4px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 20px;
	height: 20px;
	color: #333;
}

.brute-select-arrow {
	position: absolute;
	right: 4px;
	top: 8px;
	border: 4px solid transparent;
	border-top-color: #666;

}

4. Call the plugin

<script>
	$('select').bruteSelect();
</script>

Change Log:

v1.0.7 (2013-6-22)

• Fixed issue where title would not update when navigating options with arrows.

v1.0.6 (2013-4-11)

• Fixed issue where title would not update when navigating options with arrows.

v1.0.3 (2013-03-21)

• Change stripTagsInTitle to more appropriate allowHtmlInTitle option

---

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