Extra chrome border on <select> items using rounded corners

Question

I have an issue in Chrome where there are "two" borders when I use rounded corners on a select menubox (see below, the top is an input box and the bottom is the select box)

input, select { 
    border:2px solid #ced6e9; 
    -moz-border-radius:8px; 
    border-radius: 8px;
}

I've tried two other approaches, but they don't work:

1. Rounded corners in Chrome not working doesn't work and

2. setting -webkit-appearance: none; but this removes the little button indicating it's a select box

Edit I'm using Windows 7 (service pack 1) with Chrome v18

See this jsFiddle example

Answer 1

Had this problem before and all I did was remove the border on the select and wrap it in a div with the same style (rounded borders). I'm sure there's a more elegant solution but it was better than searching for hours/days for a solution.

Check out this fiddle.

Answer 2

What version of Windows are you using? Sometimes the OS will force additional graphical quirks onto certain HTML elements. Things appear to behave as desired in Chrome 18 on Windows 7 with an Aero theme enabled. I actually answered a similar question yesterday with an example for styling select element to replace the graphical elements lost with -webkit-appearance: none: https://stackoverflow.com/a/10074928/1030243. Hopefully, if no other solution is found, you can implement it with a few extra lines of CSS.