效果圖

代碼

html部分

{{item.text}}

css部分

radio .wx-radio-input.wx-radio-input-checked {

border-color: #cc0000;

background: #cc0000;

}

radio .wx-radio-input {

height: 35rpx;

width: 35rpx;

margin-top: -4rpx;

border-radius: 50%;

border: 2rpx solid #999;

background: transparent;

}

radio .wx-radio-input.wx-radio-input-checked::before {

border-radius: 50%; /* 圓角 */

width: 35rpx; /* 選中后對勾大小，不要超過背景的尺寸 */

height: 35rpx; /* 選中后對勾大小，不要超過背景的尺寸 */

line-height: 35rpx;

text-align: center;

font-size: 28rpx; /* 對勾大小 30rpx */

color: #fff; /* 對勾顏色 白色 */

background: #cc0000;

transform: translate(-50%, -50%) scale(1);

-webkit-transform: translate(-50%, -50%) scale(1);

}

js 部分

Page({

data: {

sex:[

{text:'男',value:1},

{text:'女',value:2},

]

}

})

總結

以上是生活随笔為你收集整理的微信小程序的多选改变样式_微信小程序radio的样式修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。