homepage Welcome to WebmasterWorld Guest from 54.205.168.88
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

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




msg:4338744
 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.
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




msg:4338876
 8:26 am on Jul 13, 2011 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved