twitter-bootstrap 更改 Bootstrap 的选择边界半径
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24779518/
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
Change Bootstrap's select border-radius
提问by phre
I am not able to change the border-radius for the select elements in Bootstrap 3. I tried changing some other attributes like background-color or border-color, those worked for me. The only style that doesn't work is the border-radius. I don't know what I'm doing wrong.
我无法更改 Bootstrap 3 中选择元素的边框半径。我尝试更改其他一些属性，如背景颜色或边框颜色，这些对我有用。唯一不起作用的样式是边框半径。我不知道我做错了什么。
HTML:
HTML：
<div class="container">
<form role="form" class="form-horizontal" method="get" action="<?php $_SERVER['PHP_SELF']; ?>">
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<div class="input-group">
<input type="text" class="form-control search-box" placeholder="Search">
<span class="input-group-addon">
<span class="glyphicon glyphicon-search"></span>
</span>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-6 col-md-offset-3">
<div class="col-md-6">
<select class="form-control"></select>
</div>
<div class="col-md-6">
<select class="form-control"></select>
</div>
</div>
</div>
</form>
</div>
CSS:
CSS：
body {
padding: 0;
margin: 0;
}
.form-horizontal {
margin-top: 50px;
}
/* Remove border-radius, box-shadow, border-right and transition of input box */
.search-box {
border-radius: 0px;
box-shadow: none !important;
border-right: none;
transition: none;
font-size: 16px;
}
/* Remove addon border-radius to match input border-radius */
.input-group-addon {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
background-color: #fff;
}
/* Change addon border-color to the same color as the input box when input:focus */
.search-box:focus, .search-box:focus + span {
border-color: #3498db;
}
/* Trying to change border-radius on the select element, not working... */
select {
box-shadow: none !important;
transition: none !important;
border-radius: 0px !important;
}
回答by joost
Add this to your CSS. However it will remove the nice arrows shown in Chrome:
将此添加到您的 CSS。但是它会删除 Chrome 中显示的漂亮箭头：
select.form-control {
-webkit-appearance: none;
}
You might want to add -webkit-border-radius: 0px;.
您可能想要添加-webkit-border-radius: 0px;.
Also see Bootstrap issue #15588.
另请参阅 Bootstrap 问题#15588。
回答by sstauross
You can try this:
你可以试试这个：
select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
background: 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='18' height='18' viewBox='0 0 24 24'><path fill='grey' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>") #fff;
background-position: 98% 50%;
background-repeat: no-repeat;
}
tested in chrome, firefox and safari.
在 chrome、firefox 和 safari 中测试。
