1. ホーム
  2. select

[解決済み] Removing rounded corners from a <select> element in Chrome/Webkit

2022-05-14 18:05:31

Question

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.

何かアイデアはありますか?

どのように解決するのですか?

これは私のために動作します(ドロップダウン-リストではなく、最初の外観のスタイル)。

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

http://jsfiddle.net/fMuPt/