修改element单选按钮的样式

这篇博客主要介绍如何使用CSS深入穿透选择器`::v-deep`来修改Element UI框架中的单选按钮样式。内容包括选中状态的边框颜色、鼠标悬停时的样式变化,以及选中时小圆圈和字体颜色的定制。
摘要由CSDN通过智能技术生成

//修改单选的颜色
::v-deep {
  .el-radio {
    //添加边框
    // border: 1px solid rgb(207, 204, 204);
    //选中时边框的颜色
    &.is-checked {
      // border: 1px solid #28AC5D !important;
    }

    //鼠标滑过改变字体和小圆圈边框的样式
    &:hover {
      border-color: #28AC5D !important;
      // color: #28AC5D !important;
      //鼠标滑过时小圆点边框显示
      .el-radio__inner {
        border-color: #28AC5D;
      }
    }

    .el-radio__input {
      margin-bottom: 5px;
      //选中时的样式
      &.is-checked {
        .el-radio__inner {
          //选中时小圆圈的的颜色
          background-color: #28AC5D;
          border-color: #28AC5D;
        }

        + .el-radio__label {
          //选中时字体的颜色
          color: #000 !important;
        }
      }

      .el

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值