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

xml

 <label class="checkbox"><checkbox checked="checked" disabled />获取您的公开信息(头像、昵称)等</label>

xss

/*复选框外框样式*/
checkbox .wx-checkbox-input {width: 8px;height: 8px;border: 4rpx solid #d1d1d1;border-radius: 100%;
}
/*复选框外框选中样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked {border-color: #d1d1d1;
}
/*复选框选中后内部样式*/
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {width: 60%;height: 60%;background: #777;border-radius: 100%;content: '';transform: translate(-50%, -50%) scale(1);-webkit-transform: translate(-50%, -50%) scale(1);}
.checkbox {font-size: 12px;  color: #d1d1d1;margin: 20px;line-height: 18px;
}

原文来源地址：https://www.cnblogs.com/xyyt

修改微信小程序单选，复选框样式相关推荐

微信小程序之复选框打对号
微信小程序之复选框checkbox打对号一.实现效果二.实现原理: 在父view中嵌套另一个子view. 父view显示所有边框. 子view显示右边框和下边框并顺时针旋转45度.运用margin ...
微信小程序自定义复选框
微信官方给的复选框太丑,想要样式多样需要我们自己定义先来张效果图 wxml循环生成选框,从js里取数据,根据checked的值,改变标签的样式类 <view class="two { ...
【微信小程序---checkbox复选框讲解】
效果: checkbox注意点外围要包裹checkbox-group使用 bindchange事件也是在这个标签内 wx:for 循环遍历list中的每一个item wx:key="id ...
微信小程序实现多选框+自定义样式（checkbox）
1.实现效果 2.实现原理小程序多选框微信小程序为我们提供了checkbox-group,多项选择器,内部由多个checkbox组成. checkbox: 3.实现代码 <!--pages/ ...
微信小程序获取多选框选中值和选中值对应的id
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 官方文档中只有获取多选框的值的方法,但是我需要获取选中的值同时还要获取选中值对应的id,但是又不能操作DOM获 ...
支付宝小程序获取复选框选中值id，使其显示且可编辑
问题概述在做支付宝小程序编辑表单时,需要将用户之前填.选的信息显示出来后再编辑.这里针对复选框选中值的获取显示,通过服务端发送请求后拿到的选中id,显示选中值并且可编辑. axml代码片段 < ...
小程序实现复选框全选和取消全选
页面逻辑是,在小程序复选框列表页面上单独放一个复选框用于全选(设置class为position: fixed;即可固定在页面上),当点击全选时,页面所有复选框都会勾上,再次点击后页面所有复选框的打√都 ...
微信小程序的多选改变样式_微信小程序button选中改样式-实现单选/多选
小程序实现多button单选/多选红色为选中状态单选多选 ①wxss /* pages/button-select/button-select.wxss */ .button_container ...
微信小程序的多选改变样式_微信小程序radio的样式修改
效果图代码 html部分 {{item.text}} css部分 radio .wx-radio-input.wx-radio-input-checked { border-color: #cc00 ...

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

修改微信小程序单选，复选框样式相关推荐

最新文章

热门文章