从Chrome/Webkit中的<select>元素中删除圆角

105

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的用户代理样式表规范。而后两者都是他们应该去掉的。

任何想法？

来源

2011-04-25 maxedison

你还可以发布代码吗？如果使用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

179

这对我的作品（样式第一次亮相不是下拉列表）：

select { 
    -webkit-appearance: none; 
    -webkit-border-radius: 0px; 
}

http://jsfiddle.net/fMuPt/

来源

2011-04-25 15:59:19 antonj

是的，-webkit的外观是诀窍。事实上，它摆脱了所有造型（丑陋的渐变背景，右边的箭头）。精彩！ – maxedison 2011-04-25 19:38:49

+142

任何方法去除圆角，但保持在右边的箭头？ – Adam 2014-06-16 00:59:11

您需要添加箭头，例如作为具有100％50％位置和无重复属性的背景图像。我也在CSS中使用base64编码图像来避免额外的http请求。 – abimelex 2014-07-23 12:27:55

-10

设置CSS为

border-radius:0px !important 
-webkit-border-radius:0px !important 
border-top-left-radius:0px !important

尝试，如果它的工作原理。

来源

2011-04-25 15:53:01

不起作用。我在Mac上。 – Homan 2013-01-10 19:46:15

-8

火狐：18

.squaredcorners { 
    -moz-appearance: none; 
}

来源

2013-02-12 12:18:52

关于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); 
}

https://jsfiddle.net/hLg70o70/2/

来源

2015-03-19 18:09:02 mcallahan

不，它不。 OSX铬 – zsitro 2015-10-12 12:17:38

嗯不知道有关OSX。只是在Windows上再次尝试（Chrome版本45.0），它仍然有效。我想让问题变得更奇怪，它是特定于平台的...... – mcallahan 2015-10-13 13:28:57

这是因为设置边框会导致浏览器呈现组合框本身，而不是使用操作系统提供的底层组件。 – Kong 2015-11-23 05:12:50

如果你想方边界和仍然希望小扩展箭头，我建议这样的：

select.squarecorners{ 
    border: 0; 
    outline: 1px solid #CCC; 
    background-color: white; 
}

来源

2015-05-12 22:56:13 jordan314

这样做的问题是您将覆盖'：focus'上的默认'outline'。如果你打算使用这个答案，你应该改变你的'select：focus'风格，直观地显示'select'元素变为活动状态，或者点击'：focus'。 – 2015-08-15 00:53:07

这不适用于osx chrome :( – Jammer 2015-10-27 14:24:04

@ 7immy它为我工作：http://jsfiddle.net/jordan314/78xa6qud/ – jordan314 2015-10-27 19:17:45

虽然最多的回答消除了边界，它还会删除箭头哪些如果用户不可能将该元素识别为选择，则使其变得极其困难。

我的解决方案是在选择后面粘上一个白色div（边框半径：0px）。将其位置设置为绝对位置，将其高度设置为选择的高度，并且您应该很好走！

来源

2015-06-24 09:48:44

好吧，我得到了解决方案。希望它可以帮助你:)

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>

来源

2016-05-25 18:16:27 Amit

只是我有下拉影像解决方案(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{代替。

来源

2016-05-26 13:27:24

这是唯一的答案，解决了我的问题，但要注意使用背景与背景图像作为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进入新行，绝对位置会将其从页面流中移除。最终的结果是您可以随心所欲地设计出一个漂亮的干净下划线，并且您的下拉列表仍然按用户期望的方式运行。

来源

2016-06-10 18:50:47 devigner

插图盒子阴影有诀窍。

select{ 
    -webkit-appearance: none; 
    box-shadow: inset 0px 0px 0px 4px; 
    border-radius: 0px; 
    border: none; 
    padding:20px 150px 20px 10px; 
}

Demo

来源

2016-09-25 13:56:48 Marconi

这里有一些很好的解决方案，但这个并不需要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>

保持它的简单，并避免与箭头和其他类似功能搞乱

来源

2017-08-18 17:11:03 aleemb

的一个方法是，以容纳它与相同的背景色选择标记一个div。

来源

2018-02-24 12:34:38

从Chrome/Webkit中的<select>元素中删除圆角

回答

相关问题