Extreme chrome frame on rounded selektron <select> elements

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)

Two borders

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

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

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

See this jsFiddle example

+7
source share
4 answers

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 .

+7
source

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.

+5
source

set css outline none property to dropdown list ...

 select:focus { outline: none; } 
0
source

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; } 
0
source

All Articles