Page is a not externally linkable
webfoo - 12:35 am on Jul 13, 2011 (gmt 0)
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.
<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>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;
}