Extra chrome border on <select> items using rounded corners
css, google-chrome, html, rounded-corners
Solution
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.
Problem
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: Rounded corners in Chrome not working doesn't work and 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