在Bootstrap 3中，如何从Select标签中移除边框半径？

Question

这似乎是一个琐碎的问题，但我无法解决。

在Bootstrap自己的网站上，他们有一个Select示例。

查看代码后，可以看到该选择元素有一个4像素的border-radius。

我希望将border-radius更改为0就可以从选择元素中删除border-radius，但事实并非如此-如下图所示。

我已经探索了所有正在更改该选择元素的CSS，但没有任何一种方法可以去除border radius。

- Tyler McGinnis

---

在.form-control类上更改边框半径对我来说效果很好。http://www.bootply.com/Q7goAsFc0B - j08691

即使在你的例子中，那个选择元素也有圆角了吗？ - Tyler McGinnis

结果发现这是Chrome的问题。在Firefox中打开您的bootply，它不是圆角的。很奇怪。 - Tyler McGinnis

对我来说，在Chrome中它不起作用，但在Firefox中运行良好。 - Maverick

@TylerMcGinnis 不太相关，但是你是怎么改变你的开发工具颜色方案的？我很喜欢它。 - jarrodwhitley

Answer 1

下面是在所有现代浏览器中都可用的版本。关键是使用appearance:none来删除默认格式。由于所有格式都被删除了，因此必须添加回将选择与输入区分开的箭头。注意：appearance不支持IE。

工作示例：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>

根据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>

- Eric

---

这应该是真正的答案。 - avoliva

这个答案比被选中的更好。 - Chris James Champeau

你也可以使用SVG来做这个。<?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 version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="14px" height="12px" viewBox="0 0 14 12" enable-background="new 0 0 14 12" xml:space="preserve"> <polygon points="3.862,7.931 0,4.069 7.725,4.069 "/></svg> 这种方式可以节省文件空间，同时也可以进行缓存和更易于维护。将此内容复制到一个文件中并保存为.svg，在需要时将其用作背景。 - Arno Tenkink

到目前为止，我找到的最佳答案。 - David

这绝对是最好的答案。我已经搜索了几次如何做到这一点。它应该会帮助很多，谢谢！ :) - jaredwilli

Answer 2

除了 border-radius: 0，还需要添加 -webkit-appearance: none;。

- user1732055

---

解决方案是正确的 - 但是无法在开发工具中看到原因就是完全错误的。感谢你解决了这个谜题！ - mmln

它能工作但不是完美的，“-webkit-appearance: none;” 会导致选择器右侧缺少箭头指示器。 - nightire

如果你使用 border: 0 并添加一个轮廓线，如：outline: 1像素 固定黑色; outline-offset:-1像素，它对我有用。 这将保留箭头并可以用轮廓线来模拟边框。 - Filipe Pereira

是的，这并不是一个真正的解决方案，因为就像每个人所说的那样，选择器箭头会消失。 - Chad Johnson

不要忘记IE！ :) select::-ms-expand { display: none; } - Kyle Hawk

Answer 3

我遇到了同样的问题，虽然user1732055的答案解决了边框问题，但它却移除了下拉箭头。我通过从select元素中移除边框并创建一个包装器span来解决这个问题。

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：

select.no-radius{
    border:none;
}    
.select-wrapper{
    border: 1px solid black;
    border-radius: 0px;
}

https://jsfiddle.net/Lrqh0drd/6/

- Logan Besecker

---

只有当选择具有白色背景时，此方法才有效。否则，如果使用其他颜色，则会出现半径。 - MichalCh

嗨@MichalCh，发现得不错！解决这个问题的一种方法是将包装器的背景颜色设置为与选择元素相同的值。这里有一个修改过的jsfiddle版本来演示：[https://jsfiddle.net/Lrqh0drd/75/]（https://jsfiddle.net/Lrqh0drd/75/） - Logan Besecker

这是最简洁的解决方案。 - Nikolay Tsenkov

Answer 4

您可以使用-webkit-border-radius: 0;。像这样：-

-webkit-border-radius: 0;
border: 0;
outline: 1px solid grey;
outline-offset: -1px;

这将提供方形角和下拉箭头。不建议使用-webkit-appearance: none;，因为它会关闭Chrome的所有样式。

- gns

---

但是这也有一个问题；当聚焦时，它不会清除轮廓边框半径。 - elquimista

@elquimista，你可以使用 outline: none; 来实现这个功能。 - gns

Answer 5

使用@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
}

- Marius

Answer 6

这个类被称为：

.form-control { border-radius: 0; }

请确保在包含Bootstrap CSS之后插入override。

如果您仅想要删除选择表单控件上的半径，请使用以下方法：

select.form-control { ... }

替代方案

编辑：在我的Chrome、Firefox、Opera和Safari，IE9+上运行正常（都在linux/safari & IE on playonlinux上运行）

- jBear Graphics

---

我在问题中特别说明了我如何更改表单控件的边框半径，但它没有起作用......这促使我提出了这个问题。 - Tyler McGinnis

这里有一个可用的 JSFiddle。如果它在你的电脑上仍然无法工作，请说明你使用的浏览器是什么？我无法重现你的问题。抱歉。 - jBear Graphics

奇怪。我正在使用最新版本的Chrome浏览器。显然这是机器特定的问题，因为你们两个都看到它已经改变了。编辑你的答案，这样我就可以取消我的反对票 :) - Tyler McGinnis

我遇到了同样的问题。尽管我覆盖了border-radius，但它仍然显示。让我感到很烦恼。 - user1732055

这仍然适用于最新的Bootstrap 3。 - genkilabs