更改 Bootstrap 的选择边框半径答案

【问题标题】：Change Bootstrap's select border-radius更改 Bootstrap 的选择边框半径
【发布时间】：2014-09-06 21:45:50
【问题描述】：

我无法更改 Bootstrap 3 中选择元素的边框半径。我尝试更改其他一些属性，例如背景颜色或边框颜色，这些对我有用。唯一不起作用的样式是边框半径。我不知道我做错了什么。

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：

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;
}

【问题讨论】：

它在 chrome、firefox 和 ie 中工作。 jsfiddle.net/codeandcloud/jUdLn 也许您还缺少一些其他信息？
我希望选择没有角落，就像搜索框一样。它在您提供的链接上显示选择的边框半径。
试试.input-group select { border-radius: 0px !important;} 我想这可以解决你的问题。
选择 { -webkit-appearance: none; -webkit-border-radius：0px； }
没关系，只是我的选择框中的文本现在被截断了。如何为文本本身添加间距？

标签： html css twitter-bootstrap

【解决方案1】：

将此添加到您的 CSS 中。但是它会删除 Chrome 中显示的漂亮箭头：

select.form-control {
  -webkit-appearance: none;
}

您可能想添加-webkit-border-radius: 0px;。

另请参阅 Bootstrap 问题 #15588。

【讨论】：

这会将文本向下推。

【解决方案2】：

你可以试试这个：

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;
}

在 chrome、firefox 和 safari 中测试。

【讨论】：