小程序修改默认的单选框复选框样式

/*radio未选中时样式 */ 
radio .wx-radio-input {
  width: 30rpx;
  height: 30rpx;
}


/* 选中后的 背景样式 */
radio .wx-radio-input.wx-radio-input-checked {
  border-color: #25A96D!important;
  background-color: #fff!important;
  width: 30rpx;
  height: 30rpx;
}

/* 选中后的 对勾样式  */
radio .wx-radio-input.wx-radio-input-checked::before {
  /* 去除对号 */
  content: ''; 
  width: 24rpx;
  height: 24rpx;
  border-radius: 50%;
  background-color: #25A96D;
}

修改后展示效果

 

修改复选框默认样式

.checkbox .wx-checkbox-input {
  border-radius: 32rpx; /* 圆角 */
  width: 32rpx; /* 背景的宽 */
  height: 32rpx; /* 背景的高 */
  border: 2px solid rgba(255, 129, 92, 1);
}

.checkbox .wx-checkbox-input-disabled {
  border-radius: 32rpx; /* 圆角 */
  width: 32rpx; /* 背景的宽 */
  height: 32rpx; /* 背景的高 */
  background: #f3f3f3;
  border: 1px solid rgba(201, 201, 201, 1);
}

.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: rgba(255, 129, 92, 1);
}

.checkbox  .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

.checkbox .wx-checkbox-input {
  border-radius: 32rpx; /* 圆角 */
  width: 32rpx; /* 背景的宽 */
  height: 32rpx; /* 背景的高 */
  border: 1px solid rgba(255, 129, 92, 1);
}

.checkbox .wx-checkbox-input-disabled {
  border-radius: 32rpx; /* 圆角 */
  width: 32rpx; /* 背景的宽 */
  height: 32rpx; /* 背景的高 */
  background: #f3f3f3;
  border: 1px solid rgba(201, 201, 201, 1);
}

.checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  background: rgba(255, 129, 92, 1);
}

.checkbox  .wx-checkbox-input.wx-checkbox-input-checked::before {
  width: 32rpx;
  height: 32rpx;
  line-height: 32rpx;
  text-align: center;
  font-size: 24rpx;
  color: #fff;
  background: transparent;
  transform: translate(-50%, -50%) scale(1);
  -webkit-transform: translate(-50%, -50%) scale(1);
}

原文链接:https://blog.csdn.net/qq_33551792/article/details/89631172
posted @ 2019-11-11 13:40  小白&小菜  阅读(1724)  评论(0编辑  收藏  举报
我是一个小菜鸟,飞呀飞呀,快飞高