element-ui组件库el-radio-group的样式调整

一、效果

二、 代码

1.结构

<el-radio-group class="radioD" v-model="selectTheEmployee" style="margin: 10px 0 0 10px;height: 340px;overflow-y: auto;display: flex;flex-direction: column;">
            <el-radio  v-for="(item,index) in 100" :label="item" :key="index" style="margin-bottom: 5px;">{{item}}</el-radio>
 </el-radio-group>

2.样式

    /* 改变选择框形状 */
    .radioD >>> .el-radio__inner {
        border-radius: 2px;
    }
    /* 如果需要调整文字和单选框之间的距离 */
    .radioD >>> .el-radio__label {
        padding-left: 5px;
    }
    /* 将选中状态的图标改为对钩形式 */
    .radioD >>> .el-radio__input.is-checked .el-radio__inner::after {
        content: "";
        width: 8px;
        height: 5px;
        border: 2px solid white;
        border-top: transparent;
        border-right: transparent;
        text-align: center;
        display: block;
        position: absolute;
        top: 2px;
        left: 1px;
        /* vertical-align: middle; */
        transform: rotate(-45deg);
        border-radius: 0px;
        background: none;
    }
    /* 如果需要改变选中状态的背景色 */
    .radioD >>> .el-radio__input.is-checked .el-radio__inner {
        background: red;
    }
    /* 如果需要改变选中状态的文字颜色 */
    .radioD >>> .el-radio__input.is-checked+.el-radio__label {
        color: #3F68FF;
    }