antd选择器下拉菜单样式修改[通俗易懂]

大家好，欢迎来到IT知识分享网。

// 选择器外部样式
.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页面写这些代码，有部分代码是不会生效的。