微信小程序单选框样式修改

Faaaaaaq

已于 2022-06-10 15:50:41 修改

阅读量723

点赞数

文章标签：小程序 html css

于 2021-04-16 17:48:50 首次发布

本文链接：https://blog.csdn.net/fanganqing/article/details/115768756

版权

在这里插入图片描述

css代码

/*checkbox未选中时样式 */
checkbox .wx-checkbox-input {
  /* 自定义样式.... */
  border-radius: 50%;

}


/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
  /* border: none; */
  border-radius: 50%;
  border-color: #FFDE00 !important;
  border-width: 2rpx;

}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
  /* 去除对号 */
  content: '';
  /* background: #fff; */
  width: 43rpx;
  height: 43rpx;
  border-radius: 50%;
  /* background: red; */
  background-color: #FFDE00;
  /* 居中 */
  /* margin-top: 0rpx;
  display: flex;
  position: relative; */
}





//单选
radio .wx-radio-input {
    border-radius: 50%;
    /* 圆角 */
    width: 36rpx;
    height: 36rpx;
}

/* 选中后的 背景样式 （红色背景 无边框 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked {
    border: 1px solid black;
    background: transparent;

}

/* 选中后的 对勾样式 （白色对勾 可根据UI需求自己修改） */
radio .wx-radio-input.wx-radio-input-checked::before {

    content: ' ';
    border-radius: 50%;
    /* 圆角 */
    width: 40rpx;
    /* 选中后对勾大小，不要超过背景的尺寸 */
    height: 40rpx;
    /* 选中后对勾大小，不要超过背景的尺寸 */
    /* line-height: 40rpx; */
    text-align: center;
    margin: -1.5rpx 0rpx 0rpx 0rpx;
    /* border: 1px solid; */
    /* font-size:30rpx; 对勾大小 30rpx */
    /* color:black;  */
    background: black;
}