从Chrome/Webkit中的
Chrome的用户代理样式表为<select>
元素的所有角提供了5px的边框半径。我试图通过我的外部样式表应用半径为0px的方式来消除这种情况,以及内联元素本身。我试过border-radius:0px
和-webkit-border-radius:0px;
,我试过更具体的border-top-left-radius:0px
(以及它的-webkit等价物)。从Chrome/Webkit中的<select>元素中删除圆角
没有工作。
当我检查webkit开发人员工具中的元素时,计算样式仍将半径列为5px。但是如果点击它旁边的扩展箭头查看细节,它会显示:element.style - 0px。在下面它显示了我给出的0px的外部css规范,以及5px的用户代理样式表规范。而后两者都是他们应该去掉的。
任何想法?
这对我的作品(样式第一次亮相不是下拉列表):
select {
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
设置CSS为
border-radius:0px !important
-webkit-border-radius:0px !important
border-top-left-radius:0px !important
尝试,如果它的工作原理。
不起作用。我在Mac上。 – Homan 2013-01-10 19:46:15
火狐:18
.squaredcorners {
-moz-appearance: none;
}
关于Chrome/Webkit的问题。 – zishe 2014-07-05 18:31:23
我仍然觉得这很有帮助。 – courtsimas 2017-01-23 16:16:52
出于某种原因,它实际上是受到色彩的边界?当您使用标准颜色时,角落保持圆角,但如果您稍微改变颜色,则圆角消失。
select.regularcolor {
border-color: rgb(169, 169, 169);
}
select.offcolor {
border-color: rgb(170, 170, 170);
}
如果你想方边界和仍然希望小扩展箭头,我建议这样的:
select.squarecorners{
border: 0;
outline: 1px solid #CCC;
background-color: white;
}
虽然最多的回答消除了边界,它还会删除箭头哪些如果用户不可能将该元素识别为选择,则使其变得极其困难。
我的解决方案是在选择后面粘上一个白色div(边框半径:0px)。将其位置设置为绝对位置,将其高度设置为选择的高度,并且您应该很好走!
好吧,我得到了解决方案。希望它可以帮助你:)
select{
border-image: url(http://www.w3schools.com/cssref/border.png) 30 stretch;
width: 120px;
height: 36px;
color: #999;
}
<select>
<option value="1">Hi</option>
<option value="2">Bye</option>
</select>
只是我有下拉影像解决方案(inline svg)
select.form-control {
-webkit-appearance: none;
-webkit-border-radius: 0px;
background-image: 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='24' height='24' viewBox='0 0 24 24'><path fill='#444' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
background-position: 100% 50%;
background-repeat: no-repeat;
}
替代(如上面的一个不与最新的工作火狐)
select.form-control {
-webkit-appearance: none;
-moz-appearance: none;
-webkit-border-radius: 0px;
background-image: url("https://image.flaticon.com/icons/svg/60/60781.svg");
background-position: 99% 50%;
background-repeat: no-repeat;
background-size: 16px;
}
我正在使用b这就是为什么我使用select.form-control
您可以使用select{
或select.your-custom-class{
代替。
这是唯一的答案,解决了我的问题,但要注意使用背景与背景图像作为svg的填充颜色将覆盖你有任何背景颜色为哟设置你的输入。 – 2016-06-15 15:16:58
同意,请回答这个问题!我不明白其他选票上的不完整答案。任何建议使用fontawesome图标,而不是内联svg? – 2016-06-29 11:38:33
FontAwesome是图标的集合,但您只需要一个图标。所以你需要使用一些工具,如icomoon.io 提取FA图标之后,将该图标导出为svg或png文件,并将其与您的css链接 – 2016-07-01 09:57:34
应避免消除箭头。它保留了下拉箭头的解决方案是首先从下拉列表中删除样式:
<div class="myDiv"></div>
<select class="myDropdown...">...</select>
和风格的DIV像这样:
.myDropdown {
background-color: #yourbg;
border-style: none;
}
直接在你的HTML下拉在此之前创建的div
.myDiv {
background-color: #yourbg;
border-style: none;
position: absolute;
display: inline;
border: 1px solid #acolor;
}
显示内联会阻止div进入新行,绝对位置会将其从页面流中移除。最终的结果是您可以随心所欲地设计出一个漂亮的干净下划线,并且您的下拉列表仍然按用户期望的方式运行。
插图盒子阴影有诀窍。
select{
-webkit-appearance: none;
box-shadow: inset 0px 0px 0px 4px;
border-radius: 0px;
border: none;
padding:20px 150px 20px 10px;
}
这里有一些很好的解决方案,但这个并不需要SVG,通过outline
保留边框,并将其设置按钮平齐。
select {
height: 20px;
-webkit-border-radius: 0;
border: 0;
outline: 1px solid #ccc;
outline-offset: -1px;
}
<select>
<option>Apple</option>
<option>Ball</option>
<option>Cat</option>
</select>
的一个方法是,以容纳它与相同的背景色选择标记一个div。
你还可以发布代码吗?如果使用jsfiddle.net发布它,效果会更好。 – ngen 2011-04-25 15:45:42
我其实没有任何边框半径作为Win7上Chrome 10的默认样式,也许这是另一个版本或操作系统? – 2011-04-25 15:53:08
Windows 7上的Chrome 12中没有圆角。 – andyb 2011-04-25 16:02:25