从引导3中的选择标签中删除边框半径

133

这似乎是一个微不足道的问题，但我无法弄清楚。

在Bootstraps自己的网站上，有“选择”示例。

引导选择

查看代码，选择元素上的边框半径为4。在此处输入图片说明

我希望将边界半径更改为0会从选择元素中删除边界半径，但是事实并非如此-如下图所示。

在此处输入图片说明

我已经研究了所有更改select元素的CSS，但似乎都没有删除边框半径。

css twitter-bootstrap

— 泰勒·麦金尼斯
source

1

在.form-control班级上更改边框半径对我来说很好。bootply.com/Q7goAsFc0B

— j08691 2014年

1

即使在您的示例中，该选择元素上也有圆角...？

— 泰勒·麦金尼斯

2

原来这是Chrome的问题。在firefox中打开bootply不会进行四舍五入。奇怪的。

— 泰勒·麦金尼斯

适用于Chrome和FF。

— j08691 2014年

1

对我来说，它在Chrome中不起作用，但是在Firefox中效果很好

— Maverick

256

这是适用于所有现代浏览器的版本。使用该键可appearance:none删除默认格式。由于所有格式都不用了，因此您必须重新添加箭头，以可视方式将选择内容与输入内容区分开。注意：appearanceIE不支持。

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

展开摘要

— 埃里克
source

26

这应该是真正的答案。

— 2015年

1

这是比选定的答案更好的答案

— 克里斯·詹姆斯·尚波

7

您也可以为此使用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并将其用作背景。

— 亚诺·腾金克

1

这就是答案。

— 康拉德·沃霍尔

2

这绝对是最好的答案。我已经搜索过几次方法。它应该有很大帮助，谢谢！:)

— jaredwilli

215

另外border-radius: 0，添加-webkit-appearance: none;。

— 用户1732055
source

2

解决方案是正确的-但无法了解为什么在开发工具中发生这种情况是完全错误的。感谢您解决谜语人！

— 毫米

101

它有效但不完美，-webkit-appearance: none;将导致右侧缺少箭头指示符。

— 晚上

41

@nightire如果使用border: 0并添加一个轮廓，它对我有用outline: 1px inset black; outline-offset:-1px。将保留箭头，您可以伪造带有轮廓的边框。

— Filipe Pereira 2014年

2

是的，这并不是真正的解决方案，因为就像每个人都说过的那样，选择器箭头消失了。

— 乍得·约翰逊

2

别忘了IE！:) select ::-ms-expand {display：none; }

— 凯尔·霍克

13

我遇到了同样的问题，虽然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）
source

仅当选择具有白色背景时，此方法才有效。否则，如果使用其他颜色，则将存在半径。

— MichalCh'2

大家好，@ MichalCh，赶上！解决此问题的一种方法是将包装器的背景色设置为与select元素相同的值。这是jsfiddle的修改版本，以演示：https

— //jsfiddle.net/Lrqh0drd/75/

这是最干净的解决方案。

— Nikolay Tsenkov，

2

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

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

这将给出方角以及下拉箭头。使用-webkit-appearance: none;不推荐，因为它会关闭Chrome所做过的所有造型。

— GNS
source

但这也有问题；聚焦时不会清除轮廓边界半径。

— elquimista

@elquimista，您可以使用outline: none;它。

— gns

0

将@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
}

— 马吕斯
source

-5

该类称为：

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

确保在包含引导CSS之后插入替代。

如果只想在选择表单控件上删除半径，请使用

select.form-control { ... }

代替

编辑：适用于我在chrome，firefox，opera和safari，IE9 +上运行（都在playonlinux上的linux / safari和IE上运行）

— jBear图形
source

我在问题中特别说明了如何更改窗体控件上的边界半径，但该方法不起作用...，这正是促使我提出问题的原因。

— Tyler McGinnis 2014年

1

jsfiddle.net/Ut4y9/3这是一个有效的小提琴。如果仍无法在您的计算机上运行，请指定您使用的浏览器吗？我无法重现您的问题。抱歉

— jBear Graphics

奇怪的。我正在使用最新版本的Chrome。显然，这是特定于机器的东西，因为你们俩都看到了它的改变。编辑您的答案，以便我可以更改我的反对意见：)

— Tyler McGinnis 2014年

我有同样的问题。尽管我忽略了边界半径，它仍然显示。使我抓狂。

— user1732055

最新的Bootstrap 3仍然是这种情况

— genkilabs，2015年