如何移除select和option标签的默认外边框与聚焦轮廓线

原生<option>标签属于浏览器/操作系统内置的UI控件，CSS无法直接作用于它的大部分样式属性，你写的option相关样式不生效是正常现象。

1. 彻底移除select本身的边框 #

你现有代码已经覆盖了webkit内核浏览器的样式，补充多浏览器兼容代码即可：

.languages { //select标签
  border: none;
  background-color: $bg1;
  // 兼容全浏览器清除默认原生样式
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  // 清除IE/Edge默认的下拉箭头与边框
  &::-ms-expand {
    display: none;
  }

  &:focus {
    outline: none;
    border: none;
    // 无障碍优化可选：如果需要聚焦标识可自定义阴影，不需要则删除
    // box-shadow: 0 0 0 2px #自定义高亮色;
  }
}

2. 实现无外边框的下拉选项 #

如果要完全控制下拉选项的样式，需要通过JS模拟自定义下拉组件，实现逻辑如下：

• 隐藏原生select标签，仅用它存储表单值，不影响表单提交能力
• 用div元素模拟select的选中值显示区域，可完全自定义边框、背景等样式
• 用ul+li元素模拟下拉选项列表，可自由设置li的边框、边距、hover效果等所有样式
• 绑定交互事件：点击模拟的select区域切换下拉列表显隐；点击li时将选中值同步给原生select，同时更新模拟区域的显示文本

该方案兼容性最好，不会受浏览器原生控件的样式限制。

内容的提问来源于stack exchange，提问作者tal michel