关于element-plus的Dropdown 下拉菜单属性的修改

最新推荐文章于 2024-07-24 23:46:36 发布

养只小高冷

最新推荐文章于 2024-07-24 23:46:36 发布

阅读量7.6k

点赞数 7

文章标签： javascript vue.js css3 elementui

本文链接：https://blog.csdn.net/AdorkableSera/article/details/122626891

版权

关于element-plus的dropdown的下拉菜单的样式修改

因为所做的界面和element-plus所提供的颜色不相搭配，所以进行了颜色的修改

![在这里插入图片描述](https://img-blog.csdnimg.cn/05b11ed9fcb34042b646a92f9ae899c2.png

可以看见原本的背景色为白色，字体为黑色，选中样式为蓝色

现在将背景颜色改为红色进行测试，通过修改 .el-dropdown-menu 即可
代码如下：

    /deep/ .el-dropdown-menu__item:not(.is-disabled) {
        color: aqua;
    }

在这里插入图片描述
2.现在背景颜色已经改了，剩下字体颜色和选中样式

这里element-plus对下拉菜单中的选项设置的类名害我找了好半天，最后发现是 .el-dropdown-menu__item:not(.is-disabled) ，先将字体设置为红色

    /deep/ .el-dropdown-menu__item:not(.is-disabled) {
        color: red;
    }

在这里插入图片描述
最后设置下选择后样式，这里element-plus设置的是:focus
依旧设置为我们熟悉的红色，选中样式就设置为黑色吧（原本字体选中样式为蓝色）

     /deep/ .el-dropdown-menu__item:not(.is-disabled):focus {
        background-color: red;
        color: black;
    }

在这里插入图片描述

最后成品展示
在这里插入图片描述

关注