lots of code take some code, share some code!

A more simplified version of this script is available here ...240

Utilizes:
Javascript, CSS, (x)html

Compatibility:
Firefox 1.5 / Firefox 2, MSIE7 (MSIE6 not supported)

Credits:
Howard Yeend (For suggesting the change of .value to .innerHTML so any numeric values are not displayed)

How to
In this tutorial i am going to show you how to apply a skin to the standard html select boxes, this is something i haven't seen that often enough so hopefully this should be useful for many people.

First of all we need to have an image, it should be an image of the whole select box including the border and the arrow image in the right corner, optionally you could ignore the whole default style and go your own way with this, note the dimension of the image as this will allow you to add the dimensions to the css quicker.

Lets create our selection box

<div class="skinnedSelect">
<div class="text" id="text1">Hello</div>
<select name="name" onChange="setText('text1', this);">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>

Note the two div's, one containing the other div and the other containing the text placement. As usual you have the basic options available. We are also using an onChange event handler to handle the setting of the value.

The CSS is as follows, please read the comments next to the css to understand what each selectors functionality is.

<style>
<!--
/* Add the background image and set the height of the image */
div.skinnedSelect {
background: url('./images/skin.png') no-repeat scroll 0pt 100%;
height: 19px;
}
/* Set the opacity to 0 to make the options appear invisible, this allows the image to be visable */
div.skinnedSelect select {
opacity: 0;
filter: alpha(opacity = 0);
moz-opacity: 0;
width: 150px;
margin-left: -150px;
}
/* Tee text inside the box */
div.skinnedSelect .text {
float: left;
text-indent: 10px;
line-height: 19px;
width: 150px;
}
/* Shared font sizes */
div.skinnedSelect .text,
div.skinnedSelect select option
{
font-size: 11px;
color: #316D89;
}
//-->
</style>

Now as you can see from reading the comments above each selector all the individual attributes are used to style the select selection box.

The javascript is a very simple function that basically replaced the default value of the subcontainer every time you select an option.

<script>
function setText(a, b)
{
x = document.getElementById(a);
if (x)
x.innerHTML = b.options[b.selectedIndex].innerHTML;
}
</script>

I hope you like this script, if you need any assistance installing the script then please post in our forum.

Using the skin more then once.

<div class="skinnedSelect">
<div class="text" id="text1">Hello</div>
<select name="name" onChange="setText('text1', this);">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>
<div class="skinnedSelect">
<div class="text" id="text2">Hello</div>
<select name="name" onChange="setText('text2', this);">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>

To make things easier here is the code in full.

<style>
<!--
body {
background: #fff;
font-size: 12px;
font-family: Tahoma, Verdana, Arial;
}
div.skinnedSelect {
background: url('./images/skin.png') no-repeat scroll 0pt 100%;
height: 19px;
}
div.skinnedSelect select {
opacity: 0;
filter: alpha(opacity = 0);
moz-opacity: 0;
width: 150px;
margin-left: -150px;
}
div.skinnedSelect .text {
float: left;
text-indent: 10px;
line-height: 19px;
width: 150px;
}
div.skinnedSelect .text,
div.skinnedSelect select option
{
font-size: 11px;
color: #316D89;
}
//-->
</style>
<script>
function setText(a, b)
{
x = document.getElementById(a);
if (x)
x.innerHTML = b.options[b.selectedIndex].innerHTML;
}
</script>
<form>
<p>
<div class="skinnedSelect">
<div class="text" id="text1">One</div>
<select name="name" onChange="setText('text1', this);">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>
</p>
<p>
<div class="skinnedSelect">
<div class="text" id="text2">Two</div>
<select name="name" onChange="setText('text2', this);">
<option value="one">One</option>
<option value="two">Two</option>
<option value="three">Three</option>
</select>
</div>
</p>
</form>

If you do not download this code then don't forget to get your self an image to use this with.

If you have any suggestions then please do not hesitate to bring them forward.

Filed under: CSS, Projects, CSS, Firefox, Javascript, xHTML