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

Question

在'select'元素中我没有在它的CSS中添加border属性,而且我还在其中添加了以下CSS

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

虽然它在Chrome(Mac OS)中显示我的圆形边框,为什么会这样,我怎么能克服它？

Answer 1

你可以这样使用,

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

Answer 2

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

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