CSS 从 Chrome/Webkit 中的 <select> 元素中移除圆角
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5780109/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Removing rounded corners from a <select> element in Chrome/Webkit
提问by maxedison
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:0pxand -webkit-border-radius:0px;and I've tried the even more specific border-top-left-radius:0px(along with it's -webkit equivalent).
Chrome 的用户代理样式表为<select>元素的所有角提供了 5px 的边框半径。我已经尝试通过在我的外部样式表中应用 0px 的半径以及内联元素本身来摆脱这种情况；我已经尝试了两者border-radius:0px并且-webkit-border-radius:0px;我已经尝试了更具体的border-top-left-radius:0px（以及它的 -webkit 等效项）。
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.
当我检查 webkit 开发人员工具中的元素时，计算样式仍然将半径列为 5px。但是，如果我单击它旁边的扩展箭头以查看详细信息，它会显示：element.style - 0px。下面它显示了我给出的 0px 的外部 css 规范，以及 5px 的用户代理样式表规范。后两者都被划掉了，因为它们应该是。
Any ideas?
有任何想法吗？
回答by antonj
This works for me (styles the first appearance not the dropdown list):
这对我有用（样式第一次出现而不是下拉列表）：
select {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
回答by Afzal Hossain
Just my solution with dropdown image (inline svg)
只是我的下拉图像解决方案 (inline svg)
select.form-control {
-webkit-appearance: none;
-webkit-border-radius: 0px;
background-image: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
background-position: 100% 50%;
background-repeat: no-repeat;
}
I'm using bootstrap that's why I used select.form-control
You can use select{or select.your-custom-class{instead.
我正在使用引导程序，这就是为什么我使用select.form-control
You can useselect{或select.your-custom-class{代替。
回答by jordan314
If you want square borders and still want the little expander arrow, I recommend this:
如果你想要方形边框并且仍然想要小扩展箭头，我推荐这个：
select.squarecorners{
border: 0;
outline: 1px solid #CCC;
background-color: white;
}
回答by aleemb
Some good solutions here but this one doesn't need SVG, preserves the border via outlineand sets it flush on the button.
这里有一些不错的解决方案，但这个解决方案不需要 SVG，通过保留边框outline并将其设置在按钮上齐平。
select {
height: 20px;
-webkit-border-radius: 0;
border: 0;
outline: 1px solid #ccc;
outline-offset: -1px;
}<select>
<option>Apple</option>
<option>Ball</option>
<option>Cat</option>
</select>回答by Reed Martin
While the top answer removes the border, it also removes the arrow which makes it extremely difficult if not impossible for the user to identify the element as a select.
虽然顶部答案删除了边框，但它也删除了箭头，这使得用户很难甚至不可能将元素识别为选择。
My solution was to just stick a white div (with border-radius:0px) behind the select. Set its position to absolute, its height to the height of the select, and you should be good to go!
我的解决方案是在选择后面贴一个白色的 div（带边框半径：0px）。将它的位置设置为绝对值，将它的高度设置为选择的高度，你应该很高兴！
回答by Mihai Cr?i??
Solution with custom right drop-down arrow, uses only css (no images)
带有自定义右下拉箭头的解决方案，仅使用 css（无图像）
select {
-webkit-appearance: none;
-webkit-border-radius: 0px;
background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 2.5em) 0.5em;
background-size: 5px 5px, 5px 5px, 1px 1.5em;
background-repeat: no-repeat;
-moz-appearance: none;
display: block;
padding: 0.3rem;
height: 2rem;
width: 100%;
}<html>
<body>
<br/>
<h4>Example</h4>
<select>
<option></option>
<option>Hello</option>
<option>World</option>
</select>
</body>
</html>回答by Danny Santos
One way to keep it simple and avoid messing with the arrows and other such features is just to house it in a div with the same background color as the select tag.
保持简单并避免弄乱箭头和其他此类功能的一种方法是将其放置在与 select 标签具有相同背景颜色的 div 中。
回答by devigner
Eliminating the arrows should be avoided. A solution that preserves the dropdown arrows is to first remove styles from the dropdown:
应避免消除箭头。保留下拉箭头的解决方案是首先从下拉列表中删除样式：
.myDropdown {
background-color: #yourbg;
border-style: none;
}
Then create div directly before the dropdown in your HTML:
然后直接在 HTML 中的下拉列表之前创建 div：
<div class="myDiv"></div>
<select class="myDropdown...">...</select>
And style the div like this:
并像这样设置 div 样式：
.myDiv {
background-color: #yourbg;
border-style: none;
position: absolute;
display: inline;
border: 1px solid #acolor;
}
Display inline will keep the div from going to a new line, position absolute removes it from the flow of the page. The end result is a nice clean underline you can style as you'd like, and your dropdown still behaves as the user would expect.
显示内联将阻止 div 转到新行，绝对位置将其从页面流中删除。最终结果是一个漂亮干净的下划线，您可以根据需要设置样式，并且您的下拉菜单仍然按照用户的预期运行。
回答by Marco Allori
回答by Amit
well i got the solution. hope it may help you :)
好吧，我得到了解决方案。希望它可以帮助你:)
select{
border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
width: 120px;
height: 36px;
color: #999;
}<select>
<option value="1">Hi</option>
<option value="2">Bye</option>
</select>