Extreme chrome frame on rounded selektron <select> elements

Question

I have a problem in Chrome where there are “two” borders when I use rounded corners on the highlighted menubox (see below, the top input box and the bottom pick box)

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

I tried two more approaches, but they do not work:

• Rounded corners in Chrome do n't work and

• -webkit-appearance: none; but this removes the small button pointing to the selection box

Edit I am using Windows 7 (Service Pack 1) with Chrome v18

See this jsFiddle example

Answer 1

If this problem was before, and all I did was remove the border on the selection and wrap it in a div with the same style (rounded borders). I am sure there is a more elegant solution, but it is better than looking for hours / days for a solution.

Take a look at the fiddle .

Answer 2

What version of Windows are you using? Sometimes the OS forces additional graphics quirks on certain HTML elements. Things seem to behave at will in Chrome 18 on Windows 7 with the Aero theme enabled. I actually answered a similar question yesterday with an example of styling a select element to replace graphic elements lost with -webkit-appearance: none : stack overflow We hope that if no other solution is found, you can implement it with a few extra CSS lines.

Answer 3

set css outline none property to dropdown list ...

 select:focus { outline: none; } 

Answer 4

I would recommend using an add-on instead of a field ... it will look better

 select { -moz-border-radius:8px; border-radius: 8px; -webkit-border-radius: 5px; /*this one is more important than the moz one*/ padding:9px; }