首页 前端知识 antd选择器下拉菜单样式修改

antd选择器下拉菜单样式修改

2024-10-29 11:10:35 前端知识 前端哥 878 482 我要收藏
// 选择器外部样式
.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页面写这些代码,有部分代码是不会生效的。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19471.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!