微信小程序css单选多选样式修改

玲珑小白

已于 2023-09-05 11:54:09 修改

阅读量229

点赞数

文章标签：微信小程序 css 小程序

于 2023-09-05 11:36:03 首次发布

本文链接：https://blog.csdn.net/qq_38446277/article/details/132688612

版权

750px设计图   1px=1rpx


/*checkbox 选项框大小 */
checkbox .wx-checkbox-input {
    width: 40rpx;
    height: 40rpx;
    border: 1rpx solid #216CAE;
}
/*checkbox选中后样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked {
    background: #216CAE;
}
/*checkbox选中后图标样式 */
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
    width: 28rpx;
    height: 28rpx;
    line-height: 28rpx;
    text-align: center;
    font-size: 22rpx;
    color: #fff;
    background: transparent;
    transform: translate(-50%, -50%) scale(1);
    -webkit-transform: translate(-50%, -50%) scale(1);
}



/*radio选中后样式 */
radio .wx-radio-input.wx-radio-input-checked::before{
    border-radius: 50%;
    width: 30rpx;
    height: 30rpx;
    text-align: center;
    font-size:0rpx; /* 对勾大小 去掉 */
    background-color: #216CAE;
    transform:translate(-50%, -50%) scale(1);
    -webkit-transform:translate(-50%, -50%) scale(1);
    /*border: 2rpx solid #216CAE;!* 设置边框（外圆） *!*/
}
radio{
    border-radius: 50%;
    width: 40rpx;/* 最好是4的倍数，不然会不在中间 */
    height: 40rpx;
    font-size: 0;/* 让边框重合 */
    border: 3rpx solid #216CAE;/* 设置边框（外圆） */
}
radio .wx-radio-input{
    border-radius: 50%;
    width: 40rpx;
    height: 40rpx;
    border: none;/* 替换边框（隐藏原有边框） */
}