共计 862 个字符,预计需要花费 3 分钟才能阅读完成。
// 选择器外部样式
.ant-select-selection {
background-color: #002761 !important;
color: rgba(255, 255, 255) !important;
border: 1px solid #00a7ef !important;
border-radius: 0 !important;
}
// 选择器箭头样式
.ant-select-selection .anticon {color: #00cbef !important;}
// 选择器清理图标样式
.ant-select-selection__clear {background-color: #00122e52 !important;}
// 选择器下拉菜单字体颜色
.ant-select-dropdown-menu,
.ant-select-dropdown-menu-root,
.ant-select-dropdown-menu-vertical li {color: white !important;}
// 选择器下拉菜单背景颜色
.ant-select-dropdown {
color: white !important;
border: 1px solid #00a7efab !important;
background-color: #002761 !important;
box-shadow: 1px 1px 12px -1px #0095ff7a inset !important;
}
// 选择器下拉菜单选中的数据,与鼠标移入样式
.ant-select-dropdown-menu-item-selected,
.ant-select-dropdown-menu-item-active {
background-color: #0afce86c !important;
color: white !important;
}
结果图:
需要注意的是:要另起一个 css 文件,在需要的 vue 页面导入这份 css 文件就生效了。如果直接在 vue 页面写这些代码,有部分代码是不会生效的。
原文地址: antd 选择器下拉菜单样式修改
正文完