1.簡單的修改顏色
原樣式:
修改后:
HTML代碼:
<el-radio-group v-model="newlyAdded.discount"> <el-radio label="0">工品</el-radio> <el-radio label="1">供應商</el-radio> </el-radio-group>
CSS代碼:
需要先獲取在element中 單選框的class名稱。
.el-radio__input.is-checked .el-radio__inner {//單選框選擇按鈕背景樣式 border-color: #409EFF; background: #FFF; } .el-radio__inner::after {//按鈕內圖案樣式 width: 7px; height: 7px; background-color: #409EFF; }
注意:主要查看一下當前樣式名稱是否更換,可能會因為版本的更換而更改名稱
如果是簡單的修改內部圖案都可以使用該方法:
2.銅錢樣式
HTML代碼同上
CSS代碼:
.el-radio__input.is-checked .el-radio__inner {//單選框選擇按鈕背景樣式
border-color: #409EFF;
background: #FFF;
}
.el-radio__inner::after {//按鈕內圖案樣式
width: 7px; height: 7px; background-color: #409EFF; }
.el-radio__input.is-checked .el-radio__inner::after
border-radius: