Question

我无法更改Bootstrap 3中select元素的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。

Answer 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中测试过。

更改Bootstrap的选择border-radius

2 个答案: