微信小程序radio單選框如何修改寬高及選中樣式


 

之前寫過關於多選框設置樣式的辦法,其實與單選框設置的方法一樣,唯一不同的是,在css樣式里,/* 選中后的 背景樣式 (紅色背景 無邊框 可根據UI需求自己修改) */的下面定義的css需要加上!important才會生效,意思是本css擁有最高權重,但是多選框就不用,挺逗的。

關於多選框的設置方法:微信小程序checkbox多選框如何修改寬高及選中樣式

<radio-group @change="radioChange"> <label> <radio value="1" :checked="true" />是 </label> <label> <radio value="0" :checked="false" />否 </label> </radio-group>

 

css代碼

/*radio未選中時樣式 */
radio .wx-radio-input{ width: 25rpx; height: 25rpx; border-radius: 50%; } /* 選中后的 背景樣式 (紅色背景 無邊框 可根據UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked { background: #0394F0 !important; border-color:#0394F0 !important; } /* 選中后的 對勾樣式 (白色對勾 可根據UI需求自己修改) */ radio .wx-radio-input.wx-radio-input-checked::before { width: 18rpx; height: 18rpx; line-height: 18rpx; text-align: center; font-size: 22rpx; color: #fff; background: transparent; transform: translate(-50%, -50%) scale(1); -webkit-transform: translate(-50%, -50%) scale(1); }


免責聲明!

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



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