Creating a 'new' input type by style-ing <option>

[webfoo]

I need the user to pick one option out of a list of ~5 in a web form.

The traditional <select> and <option> combo yields a pull-down such as this (please forgive the limitations of WebmasterWorld's text editor):

Pick your favourite browser:
[ Firefox ][v]

Rather than the traditional example above, I was envisioning a "bank of buttons", with the left and right sides of each button conjoined. The far left and far right options will have rounded corners on the outsides, but all inside corners will be square.

If you have access to an iPhone/Pod/Pad, go to the Maps app and "peel back" the options menu. The options are ( Map | Satelite | Hybrid | List ). This is the effect I'm going for. (If you don't have access to said iDevice, or you're just too lazy, click here for a screenshot: [dl.dropbox.com ])

So for example, let's have the user pick their favourite browser:

Pick your favourite browser:
( IE | Firefox | Chrome | Safari | Opera )

... other inputs, perhaps ...

( Vote! )

The HTML would look something like this, I suppose:

<p>Pick your favourite browser:</p>
<form action="vote.php" method="get">

<select name="fav_browser">
<option value="ie">IE</option>
<option value="ff">Firefox</option>
<option value="ch">Chrome</option>
<option value="sf">Safari</option>
<option value="op">Opera</option>
</select>

... other inputs, perhaps ...

<input type="submit" value="Vote!" />
</form>

As for the CSS, well, that's where I'm lost. Here's my (not-so-great) start. Please feel free to jump in and add on. The issue right now is that the options are still rendering as a drop-down box, not as a set of buttons.

select {
? ? ?
}

option {
background: linear-gradient(top, #f2f5f6 0%,#e3eaed 37%,#c8d7dc 100%);
padding: 5px;
border-left: 1px solid #999999;
color: black;
text-align: center;
}

// Round the corners on the first and last options in the set
option:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
option:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}

// When the users hovers over an option, change the background color slightly
option:hover {
background: linear-gradient(top, #f7fbfc 0%,#d9edf2 40%,#add9e4 100%);
color: white;
}

// When the user has selected an option, make it dark blue
option:active {
background-color: #2c539e;
color: white;
}

<disclaimer>Some of these CSS features are not safe for older browsers - I know! I will add in gradient images and browser-specific rounding once we have things how they need to be.</disclaimer>

[penders]

My initial thought is that you can't do this with a SELECT. You should probably still use a SELECT (or RADIO buttons?) for browsers that don't support JavaScript (the next bit) and to pass the users response through to in the background.

Use JavaScript... when the page loads, hide your SELECT and create your whizzy control with onclick events that pass the response through to the underlying SELECT so that the response is passed back to the server when the form is submitted.