el-radio选中时给el-radio右上角加图标
时间: 2024-05-24 18:07:24 浏览: 17
当el-radio选中时给el-radio右上角加图标,可以通过自定义样式来实现。你可以使用伪元素(::after或::before)来添加一个图标,并在选中状态下显示该图标。
首先,你需要为el-radio定义一个自定义的class,例如"custom-radio"。然后,在CSS中添加以下样式:
.custom-radio {
position: relative;
}
.custom-radio input[type="radio"]:checked + .el-radio__label::after {
content: "";
position: absolute;
top: -5px;
right: -5px;
width: 16px;
height: 16px;
background-image: url("your-icon-url");
background-size: cover;
}
在上述代码中,我们首先将自定义的class "custom-radio" 应用到el-radio上,并设置其position为relative。然后,使用选择器input[type="radio"]:checked + .el-radio__label::after来选择被选中的el-radio的兄弟元素(即.el-radio__label)的伪元素::after。在该伪元素的样式中,设置content为空,position为absolute,top和right为负值,以便将图标定位到右上角。同时,设置图标的宽度、高度和背景图片等样式。
请注意,你需要将"your-icon-url"替换为你自己的图标的URL。