欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

小程序的radio和checkbox外观改变

程序员文章站 2022-03-11 16:59:06
...

1.radio外观样式改变

    (1)wxml

<view style='color:orange;padding-bottom:10rpx'>我们是radio</view>
<radio-group class="radio-group" bindchange="radioChange">
  <label class="radio">
    <radio value="Russia" checked="true"/>苏联
  </label>
  <label class="zg">
    <radio value="China"/>中国
  </label>
  <label class="mg">
    <radio value="America"/>美国
  </label>
</radio-group>

    (2)wxss

/*宽高border*/	
radio .wx-radio-input {
	width: 38rpx;
	height: 38rpx;
	border: 1rpx solid #999;
	border-radius: 50%;
}
/*border*/
radio .wx-radio-input.wx-radio-input-checked {
	border: 1rpx solid transparent;
}
radio .wx-radio-input.wx-radio-input-checked::before {
	/*如果使用了字体,需修color*/
	/*此处为阿里字体图标,可用字体背景图代替 */
	/*content: '\e661'; 	
	font-family:"iconfont" !important; 
	line-height: 38rpx;
	text-align: center;
	font-size: 40rpx;*/
	/*背景图进行base64转化*/
	background: #fff url(data:image/png;base64,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) no-repeat center;
	background-size: 30rpx;
	/* 与CheckBox不同的地方需要背景颜色改为需要的颜色(只能通过background而background-color不能将其覆盖) */
	border: 1rpx solid transparent;
	/* 与CheckBox不同的地方需要边框透明 */
	width: 38rpx;
	height: 38rpx;
	/*如果使用了字体,需修改此处的color*/
	color: transparent;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}

2.checkbox外观样式改变

     (1)wxml

<view style='color:orange;padding-top:10rpx'>我们是checkbox</view>
<checkbox-group>
  <label class="checkbox">
    <checkbox value="Russia" checked="{{true}}"/>苏联
  </label>
  <label class="checkbox">
    <checkbox value="China" checked="{{true}}"/>中国
  </label>
  <label class="checkbox">
    <checkbox value="America" checked="{{true}}"/>美国
  </label>
</checkbox-group>
    (2)wxss
/*设置宽高,border颜色,形状*/			
checkbox .wx-checkbox-input {
	width: 38rpx;
	height: 38rpx;
	border: 1rpx solid #999;
	border-radius: 50%;
}
/*背景色,边框颜色*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
	background-color: #d4237a;
	border-color: #d4237a;
}

/*字体颜色,背景色*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
	width: 38rpx;
	height: 38rpx;
	line-height: 38rpx;
	text-align: center;
	font-size: 28rpx;
	color: #fff;
	background: transparent;
	border-radius: 50%;
	transform: translate(-50%, -50%) scale(1);
	-webkit-transform: translate(-50%, -50%) scale(1);
}

3.效果

小程序的radio和checkbox外观改变


相关标签: checkbox radio