checkbox样式

微信小程序修改checkbox样式

由 匿名 (未验证) 提交于 2019-12-03 00:15:02
/*checkbox 选项框大小 */ .agreement-box checkbox .wx-checkbox-input { width: 21rpx; height: 21rpx; } /*checkbox选中后样式 */ .agreement-box checkbox .wx-checkbox-input.wx-checkbox-input-checked { background: #CE2F2F; } /*checkbox选中后图标样式 */ .agreement-box checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { font-size: 22rpx; color: #ffffff; } 　　wxml: <view class="agreement-box"> <checkbox-group bindchange="checkboxChange"> <checkbox />我已阅读并同意《用户服务协议》 </checkbox-group> </view> 效果： 来源：博客园 作者： 四叶草2010 链接：https://www.cnblogs.com/siyecao2010/p/11757762.html

微信小程序修改checkbox样式

由 ε祈祈猫儿з 提交于 2019-12-02 18:29:38
/*checkbox 选项框大小 */ .agreement-box checkbox .wx-checkbox-input { width: 21rpx; height: 21rpx; } /*checkbox选中后样式 */ .agreement-box checkbox .wx-checkbox-input.wx-checkbox-input-checked { background: #CE2F2F; } /*checkbox选中后图标样式 */ .agreement-box checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { font-size: 22rpx; color: #ffffff; } 　　wxml: <view class="agreement-box"> <checkbox-group bindchange="checkboxChange"> <checkbox />我已阅读并同意《用户服务协议》 </checkbox-group> </view> 效果： 来源： https://www.cnblogs.com/siyecao2010/p/11757762.html

Bootstrap布局

由 試著忘記壹切 提交于 2019-12-02 16:54:54
目录 Bootstrap布局 1 概览 1.1 移动设备优先 1.2 Normalize.css 1.3 布局容器 2 栅格系统 2.1 栅格系统简介 2.2 栅格参数 2.3 栅格系统使用 2.4 不同屏幕设置不同宽度 2.5 列偏移 2.6 列位置移动 3 排版 3.1 标题 3.2 突出显示 3.3 对齐 3.4 改变大小写 3.5 引用 3.6 列表 4 代码 4.1 内联代码 4.2 用户输入 4.3 代码块 4.3 变量 4.4 程序输出 5 表格 5.1 基本 5.2 条纹状表格 5.3 带边框的表格 5.4 鼠标悬停 5.5 紧缩表格 5.6 状态类 5.7 响应式表格 6 表单 6.1 基本实例 6.2 内联表单 6.3 水平排列的表单 6.4 表单控件 7 按钮 7.1 可作为按钮使用的标签或元素 7.2 预定义样式 7.3 尺寸 7.4 激活状态 7.5 禁用状态 8 图片 8.1 响应式图片 8.2 图片形状 9 辅助类 9.1 文本颜色 9.2 背景色 9.3 三角符号 9.4 浮动 9.5 让内容块居中 9.6 清除浮动 9.7 显示或隐藏内容 9.10 图片替换 10 响应式工具 10.1 不同视口下隐藏显示 10.2 打印类 Bootstrap布局 1 概览 1.1 移动设备优先 为了确保适当的绘制和触屏缩放，需要在 <head> 之中 添加

使用css修改radio、checkbox样式

由 蓝咒 提交于 2019-12-02 14:54:00
input[type=radio],input[type=checkbox] { display: inline- block; vertical-align: middle; width: 20px; height: 20px; margin-left: 5px; -webkit-appearance: none; background-color: transparent; border: 0; outline: 0 !important; line-height: 20px; color: #d8d8d8; } input[type=radio]:after { content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 14px; font-size: 16px; color: #fff; border: 2px solid #ddd; background-color: #fff; box-sizing:border-box; } input[type=checkbox]:after { content: ""; display: block; width: 20px; height: 20px; text

Ionic基础——表单输入ion-checkbox ion-radio ion-toggle ion-spinner

由 匆匆过客 提交于 2019-12-02 10:29:25
一.复选按钮 : ion-checkbox ionic的复选按钮脱胎于HTML标准的checkbox元素，可以在一组选项中 同时选中多个。 使用ion-checkbox指令声明复选按钮元素： <ion-checkbox>...</ion-checkbox> 与标准的checkbox相比，使用ionic的ion-checkbox有几个优势： 1.样式更美观，与移动端的UI更匹配； 2.支持数据绑定。使用可选的ng-model属性，可以直接将选中状态绑定到作用域上的变量； 3.直接使用文本子元素作为标签。 <!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> <script src="../../lib/js/ionic.bundle.min.js"></script> <link rel="stylesheet" type="text/css" href="../../lib/css/ionic.min.css"> </head> <body ng

自定义checkbox 复选框的样式以及控制 checkbox 复选框的大小

由 不想你离开。 提交于 2019-12-02 05:50:26
先定定义一个selector <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/group_selected" android:state_checked="true"/> <item android:drawable="@drawable/group_unselected" android:state_checked="false"/> <item android:drawable="@drawable/group_unselected"/> </selector> 在定义一个style <style name="CustomCheckboxTheme" parent="@android:style/Widget.CompoundButton.CheckBox"> <item name="android:button">@drawable/selector_group</item> </style> 引用即可 <CheckBox android:focusable="false" android:focusableInTouchMode="false" android:clickable="false" android

小程序checkbox和radio样式修改

由 喜夏-厌秋 提交于 2019-12-02 05:47:33
1、没有修改过的默认（禁用）样式： 2、 修改默认样式（大小颜色圆角） /* 修改默认样式 */ checkbox .wx-checkbox-input,radio .wx-radio-input { border-radius: 50%; width: 40rpx; height: 40rpx; background: #fff; } 3、修改checked状态时的样式。为什么不直接在这里修改背景色，因为所有都disabled了，checked的背景色只能修改中间的打钩的部分。 /* 修改checked样式 */ radio .wx-radio-input.wx-radio-input-checked::before, checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{ color: #fff; } 4、修改禁用且checked的样式： /* 修改禁用且checked的样式 */ radio .wx-radio-input.wx-radio-input-checked.wx-radio-input-disabled, checkbox .wx-checkbox-input.wx-checkbox-input-checked.wx-checkbox-input-disabled { background:

微信小程序-自定义button、checkbox组件

由 微笑、不失礼 提交于 2019-12-02 05:47:02
问题描述 微信小程序开发过程中，经常会存在需要自定义一些组件的情况，接下来我们介绍这次开发小程序我遇到的自定义button和checkbox。 自定义button 除了简单的用view或者其他标签模拟，加上背景图片完全放飞自由，还有特定需要button按钮，比如需要用微信自带的分享转发功能，有几点需要关注： <button class = 'btn btn-default' hover- class = "none" open - type = 'share' >分享看群关系</button> 1.设置 open-type='share' 2.重置样式 button{ background-color: transparent;} 3.书写按钮自定义样式 .btn-default { width : 170 px ; height : 49 px ; background-image : url(http:// 140.206 . 163.105 /test/zsgws/btn-share1.png) ; background-size : 170 px 49 px ; -webkit-background-size : 170 px 49 px ; } 4.去除边框 button::after{ border: none;} 可以看到按钮四边有一条不是很明显的边框

微信小程序-checkbox(自定义)

由 走远了吗. 提交于 2019-12-02 05:46:46
小程序官方本提供了该组件的使用，但是扩展性不太好，所以就自己捣鼓捣鼓从新自定义写了一个类似的功能 一 、HTML <view wx:for="{{items}}" wx:key="{{*this}}" data-id="{{index}}" class="checkbox {{item.checked?'checkedActive':''}}" bindtap='userCheck'> {{item.value}} </view 二、CSS .checkbox{ display:inline-block; margin:10px; padding:6px; background:#eee; border-radius: 4px; } .checkedActive{ background:red; color:#fff; } 三、JS Page({ data:{ items:[ {'value': 'SAT'}, {'value': 'SSAT'}, {'value': 'TOEFL'}, {'value': '雅思'}, ] }, //多选 userCheck:function(e){ let index = e.currentTarget.dataset.id;//获取用户当前选中的索引值 let checkBox = this.data.items; if (checkBox

Android Studio自定义CheckBox样式

由 微笑、不失礼 提交于 2019-12-02 05:46:10
在Android Studio中自定义CheckBox样式,功能实现如下: 第一步:首先你需要两张图片,作为CheckBox在选中和不被选中状态时的样式.至于图片放在哪个文件夹里,对于Android Studio你有两个选择,一是放在drawable,一是放在mipmap-hdpi.关于这两个文件夹的区别,这里引用谷歌官方的说法:"mipmap-hdpi 和 drawable 使用mipmap-hdpi作为你的位图或冲源是一个简单的方法来提供高质量的图像和各种图像的尺度，它可以是特别有用的如果你希望你的图像被缩小在一个动画.Android 4.2（API Level 17）添加在位图类Android mipmap支持互换MIP图像位图在你当你提供源，使sethasmipmap() mipmap。现在在Android 4.3中，您可以启用一个BitmapDrawable对象以及mipmap，通过提供一个mipmap资产设置Android：位图中的资源文件或致电hasmipmap()纹理属性。" 这段话是我通过翻译得出来的,介于初学者,大可理解为,对于应用图标之类的图片,可放置于mipmap-hdpi一系列文件夹中,对于其它图片建议存放在drawable中,而且对于mipmap-hdpi文件夹内图片的引用,Android Studio是没有代码提示的.初学者慎用之. 第二步
订阅 checkbox样式