在网页开发中，表单下拉框的默认样式由浏览器内核控制，不同浏览器的下拉框外观差异较大，且直接通过常规CSS属性修改样式往往无法生效，这给前端开发带来了不少困扰。通过组合使用CSS伪类focus和属性选择器，可以有效突破这一限制，实现自定义下拉框样式的需求。
下拉框样式修改的难点
浏览器的<select>元素默认样式是内置的，常规CSS属性如background、border对下拉框的部分状态无法生效，尤其是下拉展开后的选项样式，不同浏览器的支持程度差异很大，直接修改很难达到统一的效果。
伪类focus与属性选择器的组合用法
我们可以利用属性选择器选中特定的下拉框元素，再结合:focus伪类控制下拉框获得焦点时的样式，同时配合其他伪类和属性匹配规则，覆盖默认样式。
基础选择器组合示例
首先通过属性选择器选中所有type为select的下拉框，再为获得焦点的状态设置自定义样式：
/* 选中所有select元素 */
select[type="select"] {
width: 200px;
height: 36px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 10px;
outline: none;
appearance: none;
-webkit-appearance: none;
background: url('https://ipipp.com/arrow.png') no-repeat right 10px center;
background-size: 12px;
}
/* 下拉框获得焦点时的样式 */
select[type="select"]:focus {
border-color: #409eff;
box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}
针对特定下拉框的样式定制
如果页面中有多个下拉框，需要为不同的下拉框设置不同样式，可以通过自定义属性配合属性选择器实现：
/* 选中data-custom属性为true的下拉框 */
select[data-custom="true"] {
background-color: #f5f7fa;
}
/* 该下拉框获得焦点时的样式 */
select[data-custom="true"]:focus {
background-color: #fff;
border-color: #67c23a;
box-shadow: 0 0 0 2px rgba(103, 194, 58, 0.2);
}
/* 选中disabled状态的下拉框 */
select[disabled]:focus {
border-color: #ccc;
box-shadow: none;
cursor: not-allowed;
}
兼容与注意事项
- 使用
appearance: none可以去除浏览器默认的下拉箭头，需要添加浏览器前缀兼容旧版本浏览器。 - 属性选择器可以根据元素的任意属性进行匹配，除了type、data-*属性，还可以根据class、name等属性选择目标元素。
:focus伪类不仅适用于下拉框，还可以和属性选择器组合用于输入框、按钮等其他表单元素的焦点状态样式设置。
通过这种组合方式，不需要修改HTML结构，仅通过CSS就可以实现下拉框样式的自定义，既减少了代码冗余，也提升了样式的可维护性，能够很好地解决下拉框样式不易修改的问题。