改变element单选框的样式
示例:默认的单选框的样式是这样的
示例:我想换成图标是对钩的
代码如下(示例):
// 圆的改成方的
::v-deep .el-radio__inner {
border: 1px solid #dcdfe6;
border-radius: 2px;
width: 14px;
height: 14px;
background-color: #fff;
cursor: pointer;
box-sizing: border-box;
}
// 文字和单选之间的距离
::v-deep .el-radio__label {
padding-left: 5px;
}
// 选中状态改变成对钩
::v-deep .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: 2px;
vertical-align: middle;
transform: rotate(-45deg);
border-radius: 0px;
background: none;
}
总结
提示:这里对文章进行总结