修改el-transfer穿梭框的默认按钮颜色

当element的el-transfer穿梭框无法满足修改默认按钮颜色的需求时,可以通过研究其HTML和CSS来实现自定义。由于element官方未提供修改颜色的参数,可以利用CSS的:nth-of-type(1)选择器选中第一个按钮并覆盖样式,以此改变按钮颜色。
摘要由CSDN通过智能技术生成

element的el-transfer穿梭框很好用,但是总有满足不了业务的需求的时候,比如要修改el-transfer穿梭框的默认按钮颜色,如下图
在这里插入图片描述
一般看到这样的需求,我首先会去element的官网看看这个el-transfer穿梭框有没有提供相应的参数来实现,结果去看一下发现没有,只有可以自定义按钮文案,却没有自定义按钮的颜色或样式。怎么办?只好自己去研究默认按钮颜色的css和html是怎么写,然后自己写css进行覆盖默认的样式。

在这里插入图片描述
经过我的研究,发现俩个按钮ccs和html一模一样,但是我只需要修改第一个按钮的颜色。所以想到用css的:nth-of-type(n)选择器,这个选择器可以匹配属于父元素的特定类型的第 N 个子元素的每个元素。也就是我可以用:nth-of-type(1)选到第一个按钮,然后可以写css样式改变颜色,具体代码如下:

.el-transfer__button:nth-of-type(1).el-button--primary {
    // 写你覆盖样式
  }

最终代码如下:

//初始样式
.el-transfer__button:nth-of-type(1).el-button--primary{
   
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值