从引导程序3中的选择标记中删除边框半径

这似乎是一个微不足道的问题，但我想不出来。

在 Bootstraps 自己的网站上，他们有 Select 示例。

bootstrap select



查看代码，在 select 元素上看起来有一个边界半径为4的元素。 enter image description here



我的希望是，改变这个镶边半径为0，然后将镶边半径从 select 元素中移除，然而，情况并非如此——如下图所示。

enter image description here



我已经研究了所有正在改变 select 元素的 CSS，但似乎没有一个能移除边界半径。

153996 次浏览
小开

这门课叫做:

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

一定要插入覆盖后，包括引导 CSS。

如果只想移除选定窗体控件上的半径，请使用

select.form-control { ... }

取而代之

编辑: 适用于 chrome，firefox，Opera，和 safari，IE9 + (都运行在 linux/safari 和 playonlinux 上)

小开

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

小开

我有同样的问题，而 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/

小开
最佳答案

这个版本适用于所有现代浏览器。关键是使用 appearance:none删除默认格式。因为所有的格式都已经过时了，所以必须重新添加箭头，以便在视觉上区分选择和输入。注意: < a href = “ https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-face # Browser _ 腰包兼容性”rel = “ nofollow noReferrer”> 在 IE 中不支持 appearance。

工作示例: 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 的建议，下面是一个使用 而不是 作为箭头图标的示例。

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>

小开

使用来自@ArnoTenkink 的 SVG 作为数据网址并结合公认的答案，这为我们提供了视网膜显示器的完美解决方案。

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
}
小开

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

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

这将给方角以及下拉箭头。不推荐使用 -webkit-appearance: none;，因为它会关闭所有由 Chrome 完成的样式。


提交答案