How to Customize Select Boxes Using jquery.custom-select.js [Supports IE6]

I used this when I was asked to match the design of select boxes. I often thought to myself, “Isn’t the default select box good enough?” Here’s how to customize select boxes (select) using jquery.custom-select.js. It even supports IE6.

CSS for Customizing Select Boxes (select)

※ Load the select.css file. Modify it as needed.

<link rel="stylesheet" href="select.css" type="text/css" media="all" />
<style type="text/css">
<!--
body {
    font-size: 12px;
    font-family: Verdana, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", Osaka, "ＭＳ Ｐゴシック", Arial, sans-serif;
    color: #000000;
    margin: 0;
    padding: 0;
}
h1 {
    font-size: 16px;
    font-weight: normal;
    line-height: 1.2em;
    text-align: center;
    padding: 15px 0;
}
a {
    font-size: 16px;
    text-decoration: none;
}
p {
    text-align: center;
}
#idWrap {
    width: 235px;
    margin: 0 auto;
    text-align: center;
}
-->
</style>

Adjusting the select.css File

After line 13 in the CSS file:

/* Custom Select */
dl.custom-select {
    position: relative;
    width: 78px;
    height: 31px;
    font-size: 12px;
    text-align: left;
}

Adjust the size, padding, background images, etc., as needed.

JavaScript Using jquery.custom-select.js

※ Load jquery.min.js (version 1.6) and jquery.custom-select.js files. Write the $.customSelect() function.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.custom-select.js"></script>
<script type="text/javascript">
    $(function() {
        $.customSelect();
    });
</script>

Adjusting the jquery.custom-select.js File

Around line 4 in the file:

$('select[name^=yyyy], select[name^=mm]').each(function() {

Set “yyyy” and “mm” as the name values of the select boxes as needed.

HTML for Customizing Select Boxes

※ Prepare the select boxes (select) with name=”yyyy” and name=”mm”.

<select name="yyyy" id="yyyy">

<option value="2012">2012</option>

<option value="2013">2013</option>

<option value="2014">2014</option>

</select>
<select name="mm" id="mm">

<option value="01">01</option>

<option value="02">02</option>

<option value="03">03</option>

<option value="04">04</option>

<option value="05">05</option>

<option value="06">06</option>

<option value="07">07</option>

<option value="08">08</option>

<option value="09">09</option>

<option value="10">10</option>

<option value="11">11</option>

<option value="12">12</option>

</select>

Demo Page for Customizing Select Boxes with js

Demo of customizing select boxes with js

I often wonder if it’s necessary to customize this much, but this attention to detail probably leads to great results. I strive to meet expectations as much as time and cost permit.

※ Please use this at your own risk. Do not reuse the Google Analytics tag within the demo page tag.