How to make eBay style checkboxes?

Get Started
1

I wondering if anyone has successfully made eBay style checkboxes that work cross browser?

To illustrate:
Go to www.ebay.co.uk, do a search for something and then look at the select boxes on the left hand side under ‘condition’ and ‘buying format’. I want to create something similar.

The select boxes don’t have to be done with <input type=“checkbox”> code, as long as the code validates and the visual effect is the same.

Does anyone have any pointers for how this might be achieved?

Thanks - Ben

2

Looks like CSS and an image sprite. Use firebug to dissect it.

3

Yes, already did that but couldn’t make head nor tail of the markup. The sprite state seems to be called by a <b></b> tag so presumably this is Javascript at play? Apologies but whilst I’m fine with checking Markup and CSS with Firebug I struggle to figure out the Javascript side of it.

4

The pseudo checkboxes are background images applied to b elements nested within a elements nested in a divs.

If the parent div has the class asr-nd, the background image sprite is positioned to show the empty box.

If the parent div has the class asr-sd, or is hovered, the background position is set to show the filled box.

If the parent div has the class asr-sd, hovering moves the background position to show a cross.

Examples of the markup and some of the CSS involved. These are just pointers rather than a step by step guide to replicating the original or the programming employed in applying the class to selected items.

<div class="asr-v asr-sd">
	<a href="item1.html" id="e5">
		<b></b>Express delivery
	</a>
</div>

<div class="asr-v asr-nd">
	<a href="item2.html" id="e6">
		<b></b>Free P&amp;P
	</a>
</div>

<div class="asr-v asr-nd">
	<a href="item3.html" id="e7">
		<b></b>Completed listings
	</a>
</div>

Some Styles targeting the parent div:

.asr .asr-v {
margin:3px 0;
padding:0 0 0 16px; /* the left padding provides space for the background image */
position:relative;
}

Targeting the nested b:

.asr .asr-nd a b {
background-position:-119px -130px;
}

.asr .asr-v b {
cursor:pointer;
height:11px;
left:-16px;
position:absolute;
width:11px;
}

.asr .asr-v b {
background-image:url("http://sprite.png");
margin-top:2px;
}

Targeting the b when selected:

.asr .asr-sd a b {
background-position:-139px -130px;
}

Targeting b when selected and hovered:

.asr .asr-sd a:hover b {
background-position:-149px -130px;
}
5

Victorinox - thanks for that - excellent. Makes perfect sense. Just need to write some jQuery now to try and bash together something similar (scrabbles around for sitepoint jQuery book).

Thanks again for taking the time to break that down.