修改el-transfer穿梭框右侧按钮颜色

new code Boy

已于 2023-11-15 10:55:16 修改

阅读量281

点赞数

文章标签：算法

于 2023-11-14 17:31:11 首次发布

本文链接：https://blog.csdn.net/qq_46344419/article/details/134403972

版权

假设有两个按钮都具有类名 .my-button，可以使用兄弟元素选择器（+）进行修改样式
HTML
<div class="my-button">按钮1</div>
<div class="my-button">按钮2</div>
CSS
.my-button + .my-button {
  background-color: red;
}

方式一

.el-transfer__button + .el-transfer__button {
   background-color: #ff4d4f !important;
   border-color: #ff4d4f !important;
}
.is-disabled + .is-disabled {
   background-color: #e0797b !important;
   border-color: #e0797b !important;
}

方式二

::v-deep .el-transfer__button:nth-child(2) {
   background-color: #ff4d4f !important;
   border-color: #ff4d4f !important;
}
:v-deep .is-disabled:nth-child(2) {
   background-color: #e0797b !important;
   border-color: #e0797b !important;
}