How to Display a Customized Select Box Using jquery.minimalect.js

In this article, I will introduce how to display a customized select box using jquery.minimalect.js.

CSS for Displaying a Customized Select Box

*Include jquery.minimalect.css. Adjust the rest as needed.

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	font-size:16px;
	font-weight:normal;
	line-height:1.6em;
	text-align:center;
	padding:15px 0;
}
#idWrap{
	width:400px;
	margin:0 auto;
	text-align:left;
}
-->
</style>
<link rel="stylesheet" type="text/css" href="jquery.minimalect.css" media="screen" />

JavaScript for Displaying a Customized Select Box

*Include jquery.min.js (version 1.8) and jquery.minimalect.js files. Use $().minimalect() to specify the tag element you want to display as a customized select box. Other options can also be specified.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.minimalect.js"></script>
<script type="text/javascript">
$(function() {
	//$("select").minimalect();
	$("#example1").minimalect();
	$("#example2").minimalect({ theme: "bubble", placeholder: "選択項目がありません。" });
});
</script>

HTML for Displaying a Customized Select Box

*To display a customized select box, prepare select id=”example1″ and select id=”example2″.

<select id="example1">
    <optgroup label="JavaScript">

<option value="ajax">Ajax</option>

<option value="jquery">jQuery</option></optgroup>
    <optgroup label="PHP">

<option value="smarty">Smarty</option></optgroup>
    <optgroup label="Smartphone">

<option value="android">Android</option></optgroup>

</select>

<h2>Option “Bubble” Theme</h2>

(Display appears like a speech bubble upon selection)

<select id="example2">

<option value="css">CSS</option>

<option value="facebook" selected="selected">Facebook</option>

<option value="html5">HTML5</option>

<option value="seo">SEO</option>

<option value="etc">Other</option>

</select>

jquery.minimalect: Demo Page for Displaying a Customized Select Box

jquery.minimalect: Demo Page for Displaying a Customized Select Box

Source: Minimalect by groenroos

Source: Minimalect by groenroos

　
If you have the design parts, you might be able to customize it more with just some CSS adjustments.

　
*Use at your own risk. Please do not reuse the Google Analytics tags from the demo page.