1. 程式人生 > 其它 >CSS修改單選框樣式(element)

CSS修改單選框樣式(element)

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: 0px; }