Themed HTML Select List Wednesday, March 30, 2011

I was recently given a design comp for a new site I've been assigned to. And in typical graphic designer fashion, they gave me a beautiful design that almost isn't possible for the web. The comp had a themed select list:

This is typically frowned upon by developers because we all know that you can't change the down arrow on a select list, or can you? I searched the web high and low but couldn't find a decent answer on how to do this. Most people were content with using a jquery-driven div-select that wasn't really a select at all but rather would set a hidden input with the selected value. That just seemed messy (and heavy) to me.

So I did some experimenting and found that if you set the opacity of the select to 0, it would disappear, but it would still show it's drop down contents if you knew where to click, i.e. if you knew where the select was even though you couldn't see it.

Here's what I did:

<style>
.search_crit .arrow
{
float:right;
width:9px;
height:6px;
background:#FFF url(themes/base/images/ui-icons-buttons.png) no-repeat 0 -569px;
margin:10px;
}
.search_crit .select
{
position:absolute;
border:solid 1px #CCC;
width:179px;
height:26px;
background-color:#FFF;
margin-top:8px;
}
.search_crit .select_txt
{
float:left;
font:italic 12px Arial;
height:26px;
line-height:26px;
vertical-align:middle;
padding-left:5px;
}
.search_crit select
{
z-index:5;
position:relative;
width:179px;
height:26px;
margin-top:8px;
opacity:0;
filter:alpha(opacity=0);
}
<style>

<div class="search_crit">
<label for="Results_per_page">Results per page</label>
<div class="field">
<div class="select">
<span id="results_txt" class="select_txt">20</span>
<span class="arrow"></span>
</div>
<select name="Results_per_page" id="Results_per_page" class="c" onchange="FormHelpers.SpanSelect_onchange(this, 'results_txt')">
<option value="5">5</option>
<option value="12" selected="selected">12</option>
<option value="15">15</option>
<option value="20">20</option>
<option value="25">25</option>
<option value="30">30</option>
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
<option value="50">50</option>
<option value="75">75</option>
<option value="100">100</option>
</select>
</div>
<div class="c"></div>
</div>

<script type="text/javascript" language="javascript">
var FormHelpers = {
SpanSelect_onchange: function (obj, spanId)
{
document.getElementById(spanId).innerHTML = obj.options[obj.selectedIndex].text
}
}
</script>

The <span class="arrow"></span> is an image sprite and could just as easily be an actual <img/> tag. basically what I'm doing here is setting the opacity of the select to 0, and positioning a themed, absolute positioned, div on top of it. I've also created a lightweight javascript helper class to set the text of the div equal to the selected value[or text] of the select. I like this method because it feels lightweight and doesn't require funky databinding to a jquery container.