CSS 从引导程序 3 中的 Select 标签中删除边框半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24210132/
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
Remove border radius from Select tag in bootstrap 3
提问by Tyler McGinnis
This seems like a trivial problem, but I can't figure it out.
这似乎是一个微不足道的问题，但我无法弄清楚。
On Bootstraps own website they have the Select example.
在 Bootstraps 自己的网站上，他们有 Select 示例。
Looking at the code it looks like there's a border-radius of 4 on that select element.
查看代码，该选择元素上的边框半径似乎为 4。
My hope would be that changing that border-radius to 0 would then remove the border-radius from the select element, however, that's not the case - as seen in the picture below.
我希望将边框半径更改为 0 会从选择元素中删除边框半径，但是，情况并非如此 - 如下图所示。
I've explored all the CSS that is changing that select element but none of it seems to remove the border radius.
我已经探索了所有更改该 select 元素的 CSS，但似乎都没有删除边框半径。
回答by Eric
Here is a version that works in all modern browsers. The key is using appearance:nonewhich removes the default formatting. Since all of the formatting is gone, you have to add back in the arrow that visually differentiates the select from the input. Note: appearanceis not supported in IE.
这是一个适用于所有现代浏览器的版本。关键是使用appearance:none它删除默认格式。由于所有格式都消失了，您必须重新添加箭头以在视觉上区分选择和输入。注意：appearance在 IE 中不支持。
Working example: https://jsfiddle.net/gs2q1c7p/
工作示例：https: //jsfiddle.net/gs2q1c7p/
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>Based on Arno Tenkink'ssuggestion in the comments, here is an example that uses a svginstead of a pngfor the arrow icon.
基于Arno Tenkink在评论中的建议，这里有一个示例，它使用svg而不是png作为箭头图标。
select:not([multiple]) {
-webkit-appearance: none;
-moz-appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml;utf8,<?xml version="1.0" encoding="utf-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" version="1"><path d="M4 8L0 4h8z"/></svg>');
padding: .5em;
padding-right: 1.5em
}
#mySelect {
border-radius: 0
}<select id="mySelect">
<option>Option 1</option>
<option>Option 2</option>
</select>回答by user1732055
In addition to border-radius: 0, add -webkit-appearance: none;.
此外border-radius: 0，添加-webkit-appearance: none;.
回答by Logan Besecker
I had the same issue and while user1732055's answer fixes the border, it removes the dropdown arrows. I solved this by removing the border from the selectelement and creating a wrapper spanwhich has a border.
我遇到了同样的问题，虽然 user1732055 的回答修复了边框，但它删除了下拉箭头。我通过从select元素中移除边框并创建一个span具有边框的包装器解决了这个问题。
html:
html：
<span class="select-wrapper">
<select class="form-control no-radius">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</span>
css:
css：
select.no-radius{
border:none;
}
.select-wrapper{
border: 1px solid black;
border-radius: 0px;
}
回答by gns
You can use -webkit-border-radius: 0;. Like this:-
您可以使用-webkit-border-radius: 0;. 像这样：-
-webkit-border-radius: 0;
border: 0;
outline: 1px solid grey;
outline-offset: -1px;
This will give square corners as well as dropdown arrows. Using -webkit-appearance: none;is not recommended as it will turn off all the styling done by Chrome.
这将给出方角以及下拉箭头。使用-webkit-appearance: none;不推荐，因为它会关闭Chrome所做过的所有造型。
回答by Marius
Using the SVG from @ArnoTenkink as an data url combined with the accepted answer, this gives us the perfect solution for retina displays.
使用来自@ArnoTenkink 的 SVG 作为数据 url 并结合接受的答案，这为我们提供了视网膜显示的完美解决方案。
select.form-control:not([multiple]) {
border-radius: 0;
appearance: none;
background-position: right 50%;
background-repeat: no-repeat;
background-image: url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%20%3C%21DOCTYPE%20svg%20PUBLIC%20%22-//W3C//DTD%20SVG%201.1//EN%22%20%22http%3A//www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd%22%3E%20%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2214px%22%20height%3D%2212px%22%20viewBox%3D%220%200%2014%2012%22%20enable-background%3D%22new%200%200%2014%2012%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpolygon%20points%3D%223.862%2C7.931%200%2C4.069%207.725%2C4.069%20%22/%3E%3C/svg%3E);
padding: .5em;
padding-right: 1.5em
}
回答by jBear Graphics
the class is called:
该类被称为：
.form-control { border-radius: 0; }
be sure to insert the override after including bootstraps css.
确保在包含引导 css 后插入覆盖。
If you ONLY want to remove the radius on select form-controls use
如果您只想删除选择表单控件上的半径，请使用
select.form-control { ... }
instead
反而
EDIT: works for me on chrome, firefox, opera, and safari, IE9+ (all running on linux/safari & IE on playonlinux)
编辑：适用于我的 chrome、firefox、opera 和 safari、IE9+（全部在 linux/safari 和 playonlinux 上的 IE 上运行）
