小程序radio,checkbox,以及元素样式改变样式

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"
 })
 }
})

参考网址: https://www.jb51.net/article/152840.htm