更改Bootstrap的选择边界半径

Question

我无法更改Bootstrap 3中选择元素的border-radius.我尝试更改一些其他属性,如background-color或border-color,这些属性对我有用.唯一不起作用的风格是border-radius.我不知道我做错了什么.

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

Answer 1

将其添加到您的CSS中.但是它会删除Chrome中显示的漂亮箭头:

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

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

另请参阅Bootstrap问题#15588.