a-select 下拉框样式修改

最新推荐文章于 2024-07-09 09:26:43 发布

逆风优雅

最新推荐文章于 2024-07-09 09:26:43 发布

阅读量2.8k

点赞数

分类专栏： CSS 文章标签： css css3 html

本文链接：https://blog.csdn.net/qq_44603011/article/details/126670067

版权

CSS 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

    // 下拉框的总的样式
    /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%);
    }

修改的效果：