CSS3 rounded corner + <select> drop down

HTML & CSS
1

I need help in using the CSS3 rounded corner to style my <select> drop down. So far I have this:

#example1 {
border-radius: 15px;
width:150px;

<select id="example1">
<option>1</option>
<option>2</option>
</select>

The problem with this is that the little box with the arrow is still squared. How can I “shape” that to conform with the box (border topleft and bottomleft 90 degree, while topright and bottomright rounded)?

1 Like
2

I can pretty much guess there is no way to cross browser that at all. The only way I found was to use this { visibility: inherit; } jQuery Custom Select!

3

It has nothing to do with the browser, it has to do with the OS underneath.

Browsers don’t have their own interface objects, they use the ones the underlying OS provides for them.

One good example of transformed select elements is Google Translate. A good VISUAL example. The mark up has some semantic problems.

Like Eric said, a JS/CSS solution is required. It would be interesting if Paul would start his quizes again and challenge us to find a pure CSS way for a custom select element skin.

4

Hmmm…now you’ve got me thinking :slight_smile:

5

Face it, Paul, it’s been a long time. Do you think you still know how to do it? :lol:

6

You can round the select quite easily with border-radius but not the option box or the little arrow.

To make the select round you first have to define the border because the default border is specially supplied and won’t round.


select {
    width:150px;
    border:1px solid red;
    -webkit-border-top-right-radius: 15px;
    -webkit-border-bottom-right-radius: 15px;
    -moz-border-radius-topright: 15px;
    -moz-border-radius-bottomright: 15px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
    padding:2px;
}

lol - I like a challenge :slight_smile:

See attachment for a screenshot of a version that works in IE8 and upwards. It requires images though.

I think it would make an interesting quiz as I’m sure some bright spark could come up with something better.

7

Or worse! Does it really matter?

What you’re waiting for then !? :slight_smile:

8

Thanks for your post Paul. It works perfectly.