修改
<select>
标签属性时,会遇到自定义 option 背景色和字体不生效,及浏览器兼容性的问题。
可以参考以下解决方案。
一、select 默认样式修改
select {
border: 1px solid #d7d7d7;
border-radius: 4px;
width: 100%;
outline: none;
color: #333;
option {
padding: 4px 8px;
&:checked {
background-color: rgba(40, 114, 225, 0.3) !important;
color: #2872e1;
/* 背景色 - 兼容不同浏览器 */
background: linear-gradient(0deg, #b2d1f3 0%, #b2d1f3 100%);
/* 字体颜色 - 兼容不同浏览器 */
-webkit-text-fill-color: #2872e1;
}
}
}
二、option focus 状态时背景色和字体
1、单选
// select focus 背景
select:focus option:checked {
color: #2872e1 !important;
/* 背景色 - 兼容不同浏览器 */
background: linear-gradient(0deg, #b2d1f3 0%, #b2d1f3 100%);
/* 字体颜色 - 兼容不同浏览器 */
-webkit-text-fill-color: #2872e1 !important;
}
2、多选
当设置
<select multiple></select>
多选,使用属性选择器[nultiple]
// select focus 背景
select[multiple]:focus option:checked {
color: #2872e1 !important;
/* 背景色 - 兼容不同浏览器 */
background: linear-gradient(0deg, #b2d1f3 0%, #b2d1f3 100%);
/* 字体颜色 - 兼容不同浏览器 */
-webkit-text-fill-color: #2872e1 !important;
}