Html 删除 Mac OS Browser:Chrome 中 <select> 元素的默认圆形边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21283461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Remove Default round border of <select> element in Mac OS Browser:Chrome
提问by Sona
in 'select' element i haven't added border property in CSS of it , and also i have added following CSS in it
在“选择”元素中，我没有在它的 CSS 中添加边框属性，而且我还在其中添加了以下 CSS
.select
{
-webkit-appearance: none;
-webkit-border-radius: 0px;
}
though its showing me round border in Chrome (Mac OS),why it is so ,how can i get over it ?
尽管它在 Chrome (Mac OS) 中向我显示圆形边框，但为什么会这样，我该如何克服它？
回答by Pranav C Balan
You can update css appearanceproperty.
您可以更新 cssappearance属性。
.select{
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-border-radius: 0; /* Safari 3-4, iOS 1-3.2, Android 1.6- */
-moz-border-radius: 0; /* Firefox 1-3.6 */
border-radius: 0; /* Opera 10.5, IE 9, Safari 5, Chrome, Firefox 4, iOS 4, Android 2.1+ */
}
回答by Priyank Dey
Though its a old question. I tried by keeping arrow on the right side.
虽然这是一个老问题。我尝试将箭头保持在右侧。
select {
color: #fff;
background: #17406B;
border: solid 7px #17406B;
outline: #17406B solid thick;
outline-offset: -5px;
}
回答by Ashhab
This should work:
这应该有效：
select {
background: #fff;
color: #2dccd3;
outline: #ffffff solid thick;
outline-offset: -5px;
-webkit-border-radius: 0px !important;
}
回答by Profesor08
Just use
只需使用
border: 1px ridge rgb(169, 169, 169);
border radius will be 0px
边界半径将为 0px
solution is in changing the border-style to ridge.
解决方案是将边框样式更改为ridge.
be happy
要开心
