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;


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM