首页 前端知识 a-select 下拉框样式修改

a-select 下拉框样式修改

2024-03-12 01:03:42 前端知识 前端哥 354 581 我要收藏
    // 下拉框的总的样式
    /deep/.ant-select-dropdown-menu {
        background: #091F40;
        border: 1px solid rgba(122, 191, 255, 0.2);
        box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2);
        border-radius: 2px;
        height: 200px;
    }
    // 下拉框 每个item的样式
    /deep/.ant-select-dropdown-menu-item {
        font-weight: 400;
        font-size: 14px ;
        color: #BEE1FF ;
    }

    /deep/.ant-select-dropdown-menu-item:hover {
        
        background: linear-gradient(90deg, rgba(27, 139, 243, 0.3) -0.14%, rgba(27, 139, 243, 0) 99.86%);
     
    }
    // 下拉菜单 选中的效果
    /deep/.ant-select-dropdown-menu-item-selected {
        color: #fff ;
        background: linear-gradient(90deg, #1B8BF3 -0.14%, rgba(27, 139, 243, 0) 99.86%);
    }
    // 下拉菜单 经过的效果
    /deep/.ant-select-dropdown-menu-item-active {
        background: linear-gradient(90deg, #1B8BF3 -0.14%, rgba(27, 139, 243, 0) 99.86%);
    }

修改的效果:

 

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