View Full Version : <select> and <option> Styling.

05-08-2011, 09:38 PM
Hi, I think it would be best to show you the website: http://scalamoosh.com/form-demo/

I am wanting the combo-box options to be styled in the same rounded border style as the text box, but in a way that looks like it is an extension of the select, and not separate.

I hope that's clear enough, if not, ask away!


05-08-2011, 10:19 PM
You need to include the moz radius property to give the rounded corners:

article section form option {
-moz-border-radius: 20px 20px 20px 20px;
background: -moz-linear-gradient(center top , #F58233, #E15F0B) repeat scroll 0 0 transparent;
border-bottom: 2px solid #BBBBBB;
border-left: 2px solid #BBBBBB;
border-right: 2px solid #BBBBBB;
color: #220B28;
font-size: 1.1em;
margin: 0 auto;
text-align: center;
width: 200px;
But you'll also need to adjust the width and height ,etc., if you want it to look like a continuation of the 'select'.

05-08-2011, 10:23 PM
Hint: You could cheat and copy the relevant properties from those for the select:

article section form select {
-moz-border-radius: 20px 20px 20px 20px;
background: -moz-linear-gradient(center top , #F58233, #E15F0B) repeat scroll 0 0 transparent;
border: 2px solid #BBBBBB;
color: #220B28;
font-size: 1.4em;
margin: 0 0 15px;
padding: 8px 10px;
text-align: center;
width: 275px;

05-08-2011, 10:25 PM
Yeah, this was similar to how i had it before, but i removed the values because it looks like a list of buttons rather than a list.

I have just added the

-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;

back in, but would appreciate a little help to make it look like a continuation of the select.

05-08-2011, 10:29 PM
You said you wanted the same rounded corners, but apparently not; so I'm lost :confused:. Good luck.

05-08-2011, 10:34 PM
Sorry, I did put it in a slightly confusing way.

I want it so the top of the select and the bottom of the list of options has a round border, with everything in between it as normal. does that make sense?

05-09-2011, 01:07 AM
You'll need to give the last 'option' an id and style it with the rounded border (and remove the rounded borders from the other 'option's).

05-09-2011, 01:20 AM
hmmm, That's going to be a bit harder than it sounds.

The data that is to populate the combo-box is done so through a JSP logic:iterate.

Back to the drawing board I think.

Thanks Anyway!

05-09-2011, 01:28 AM
CSS3 has the 'last-child' selector

article section form select:last-child { }
but, typically :mad: it's not supported by IE8 or earlier.

Added: Actually, I would use this anyway, and just accept that it won't look quite as good in this older browser.