移除 Mac OS 浏览器中 <select> 元素的默认圆形边框：Chrome

Posted 2023-03-06

【中文标题】移除 Mac OS 浏览器中 <select> 元素的默认圆形边框：Chrome

【英文标题】：Remove Default round border of <select> element in Mac OS Browser:Chrome

【发布时间】：2014-02-12 13:00:59

【问题描述】：

在'select'元素中我没有在它的CSS中添加边框属性，并且我在其中添加了以下CSS

    .select
     
      -webkit-appearance: none;
      -webkit-border-radius: 0px;
     

虽然它在 Chrome (Mac OS) 中显示圆形边框，但为什么会这样，我该如何克服它？

【参考方案1】：

您可以更新 css appearance 属性。

.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+ */

【讨论】：

请注意，箭头也会消失。如果没有箭头，就很难将元素识别为选择字段。

@BjörnWeinbrenner 您可以使用自定义箭头作为背景图像，它适用于我:)

【参考方案2】：

随便用

border: 1px ridge rgb(169, 169, 169);

边界半径将为0px

解决方案是将边框样式更改为ridge。

快乐

【参考方案3】：

虽然这是一个老问题。我尝试将箭头保持在右侧。

select 
    color: #fff;
    background: #17406B;
    border: solid 7px #17406B;
    outline: #17406B solid thick;
    outline-offset: -5px;

【参考方案4】：

这应该可行：

select 
    background: #fff;
    color: #2dccd3;
    outline: #ffffff solid thick;
    outline-offset: -5px;
    -webkit-border-radius: 0px !important;