如何用CSS编辑可展开列表样式并去除蓝色边框？

没问题，我来帮你搞定这两个需求——自定义下拉选择框的样式，还有去掉烦人的蓝色边框！先看看你的问题场景和代码片段：

我现在只能修改按钮的样式，但没法修改可展开的下拉列表（select元素）的样式，同时还想去除它的蓝色边框。相关的HTML代码片段如下：

<table> 
  <input class="select" type="hidden" value="COLOR DE FONDO:" placeholder="COLOR DE FONDO DEL DISEÑO"> 
  <tr> 
    <td>
      <select class="select"> 
        <option value="" disabled selected>Color de fondo</option> 
        <option value="Blanco">Blanco </option> 
        <!-- 其他选项省略 -->
      </select>
    </td>
  </tr>
</table>

一、先搞定蓝色边框的问题 #

这个蓝色边框一般是浏览器给select元素设置的聚焦默认样式，直接用CSS覆盖就行：

/* 移除聚焦时的蓝色外边框和阴影 */
.select:focus {
  outline: none;
  box-shadow: none;
}

/* 如果是默认状态下的蓝色边框，直接修改border属性 */
.select {
  border: 1px solid #ddd; /* 换成你想要的边框样式，比如灰色 */
}

二、自定义下拉选择框的样式 #

原生select的下拉列表（就是展开后显示option的面板）在不同浏览器里样式控制有限，但我们可以通过两步实现基础的自定义：

1. 重置原生样式，自定义可见部分 #

先把浏览器默认的select外观去掉，然后设置自己想要的样式：

.select {
  /* 移除浏览器默认的外观（箭头、圆角等） */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  
  /* 自定义基础样式 */
  padding: 8px 30px 8px 12px; /* 右侧留足够空间放自定义箭头 */
  border-radius: 4px;
  background-color: #ffffff;
  font-size: 14px;
  color: #333333;
  cursor: pointer;
}

2. 添加自定义下拉箭头 #

因为我们去掉了原生箭头，需要用伪元素给select的父元素（这里是<td>）加一个自定义箭头：

/* 给select的父元素td设置相对定位 */
td {
  position: relative;
}

/* 用伪元素生成下拉箭头 */
td::after {
  content: "▼";
  position: absolute;
  right: 15px; /* 调整箭头位置 */
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none; /* 让点击穿透到下面的select元素 */
  color: #666666;
  font-size: 12px;
}

3. 尝试自定义下拉选项的样式 #

虽然不同浏览器对option的样式支持度不一，但可以试试设置基础样式：

/* 下拉选项的基础样式 */
.select option {
  background-color: #ffffff;
  color: #333333;
  padding: 8px;
}

/* 选中状态的选项样式 */
.select option:checked {
  background-color: #f0f0f0;
}

如果需要完全自定义下拉面板的样式（比如修改边框、hover效果等），那可能需要用JavaScript模拟下拉列表（比如用div代替原生的option面板，隐藏原生select，同步选中值），不过日常需求里上面的方法足够应付大部分场景啦。

内容的提问来源于stack exchange，提问作者Peter Palmer