1.小程序中radio的设置
<radio-group>
<label>
<radio value="1" />
</label>
</radio-group>
/* radio原有样式 */
radio .wx-radio-input {
width: 24rpx;
height: 24rpx;
border-radius: 100%;
border: 2rpx solid #E60012;
background: none;
}
/* 选中后样式*/
radio .wx-radio-input.wx-radio-input-checked {
border: 2rpx solid #E60012 !important;
background-color: #fff;
}
radio .wx-radio-input.wx-radio-input-checked::before {
width: 60%;
height: 60%;
background: #E60012;
border-radius: 100%;
content: '';
transform: translate(-50%, -50%) scale(1);
-webkit-transform: translate(-50%, -50%) scale(1);
}
效果
image.png
2 Checkbox样式修改
checkbox .wx-checkbox-input {
width: 24rpx;
height: 24rpx;
border-radius: 50%;
border: 2rpx solid #E60012;
}
/*checkbox选中后样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
/* background: #FF525C; */
border: 2rpx solid #E60012 !important;
border-radius: 50%;
}
/*checkbox选中后图标样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
content: '';
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background-color: #E60012;
}
3.小程序如何改变样式(上图)
image.png
1.wxml
<view >
<view class="cont" style="background:{{background}};">属性改变</view>
<button bindtap="tryDriver">测试</button>
</view>
Page({
data: {},
tryDriver: function() {
this.setData({
background: "#89dcf8"
})
}
})
.cont{
height: 150rpx;
line-height: 150rpx;
text-align: center;
border: 1px solid #89dcf8;
margin-bottom:112rpx;
margin:13rpx;
}
多个样式
<view >
<view class="cont" style="background:{{background}};color:{{color}};height:{{height}}">属性改变</view>
<button bindtap="tryDriver">测试</button>
</view>
Page({
data: {},
tryDriver: function() {
this.setData({
background: "#89dcf8",
color:'#ffffff',
height:"322rpx"
})
}
})
