maxedison maxedison - 6 months ago 32
CSS Question

Removing rounded corners from a <select> element in Chrome/Webkit

The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a

<select>
element. I've tried getting rid of this by applying a radius of 0px through my external stylesheet, as well inline on the element itself; I've tried both
border-radius:0px
and
-webkit-border-radius:0px;
and I've tried the even more specific
border-top-left-radius:0px
(along with it's -webkit equivalent).

None are working.

When I examine the element in webkit's developer tools, the Computed Style still lists the radius as 5px. But if I click the expander arrow next to it to see the specifics, it reads: element.style - 0px. And below that it shows the external css specification I gave of 0px, along with the user-agent stylesheet specification of 5px. And both of those latter two are crossed out, as they should be.

Any ideas?

Answer

This works for me (styles the first appearance not the dropdown list):

select {
  -webkit-appearance: none;
  -webkit-border-radius: 0px;
}

http://jsfiddle.net/fMuPt/

Comments