之前寫過關於多選框設置樣式的辦法,其實與單選框設置的方法一樣,唯一不同的是,在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); }