Tutorial: How to Make a Size Selector Control (CSS – Javascript)

Ever wonder how to make one of those little size selector things that t-shirt sites use in forms?

This question came up recently, so here is a (fairly) simple solution for it that doesn’t rely on images.

We’ll be using a simple text-replacement technique (css), with a little bit of straightforward javascript and a set of radio buttons to achieve the desired effect.

Here is the finished product.

»example source page

first lets take a look at the markup we’ll be using for this. Since the desired effect is that of a radio button set, we’ll start there.

<form name="myform">
   <div class="radios" id="set1">
      <input type="radio" class="hidden" name="test" id="test1" value="SM">
      <label for="test1" onClick="setChecked(this, set1);">SM</label>

      <input type="radio" class="hidden" name="test" id="test2" value="M">
      <label for="test2" onClick="setChecked(this, set1);">M</label>

      <input type="radio" class="hidden" name="test" id="test3" value="L" checked>
      <label for="test3" onClick="setChecked(this, set1);" class="checked">L</label>

      <input type="radio" class="hidden" name="test" id="test4" value="XL">
      <label for="test4" onClick="setChecked(this, set1);">XL</label>

      <input type="radio" class="hidden" name="test" id="test5" value="2X">
      <label for="test5" onClick="setChecked(this, set1);">2X</label>
   </div>
</form>

Here is a fairly simple bit of our form. For this example, all you really need is a radio set with labels. We’re wrapping the radio set in a div with a class of ‘radios’ just to make sure that we don’t trample over any other styles in our CSS later on. We’ll also give this an ID so that we can adjust the className of these elements without screwing up other labels you might have in your form

Note: It’s important that each button has an ID so that the label->for relationship will work correctly.

Most of the activity is going to take place on the labels, since we’re going to hide the actual radio controls. We’ll use the onClick event to trigger our little bit of javascript, which will allow us to change the style of the label to reflect that it has been clicked.

Let’s take a look at that:

function setChecked(label, container)
	{
	/* clear previous checked status */
	var labels=container.getElementsByTagName('label');
	for(i=0; i<labels.length; i++)
		{
		labels[i].className="unchecked";
		}

	/* set current label to checked */
	label.className="checked";
	}

Pretty simple, right? All we’re doing is looping over the labels in the container and resetting them all to a default class before we set the current label to ‘checked’.

Last, but not least there is some CSS that we’ll need to use to pull this all together.

.radios .hidden{
	position:absolute;
	left:-9999px;
	}

This is important, we’re using a simple text-replacement to hide the radio buttons without rendering them inert, since we want to be able to capture the value we’ve chosen.

.radios .checked{
	color:#fc0;
	background:#333;
	}
.radios .unchecked{
	color:#000;
	background:#fff;
	}
.radios label{
	border:1px solid #555;
	width:20px;
	height:20px;
	font-size:10px;
	line-height:20px;
	font-family:sans-serif;
	text-align:center;
	background:#fff;
	display:block;
	position:relative;
	float:left;
	margin-right:1px;
	}

The rest of that is just styling to make them nice looking little boxes.