[原创] CSS自定义IOS苹果,Android安卓的CheckBox 效果,可以根据文字大小变化而变化,内框显示文字,另外可自定大小,自定颜色
在经过对网上一些自定CheckBox的一番研究之后,现在综合讲一下该样式实现的技巧。
先上图:
图中已展示了多种样式,实现的原理很简单,一个外Box,一个内Box,外Box显示背景色,内Box显示白色背景,默认情况下内Box靠左, CheckBox选择之后,内Box靠右,同时外Box变更背景色。
要实现CheckBox的效果一般是label套一个CheckBox再套一个span一实现,用label嵌套的好处是,用户点击文字就可以变更CheckBox的选定状态,并且文字放在CheckBox的前或后都可以,代码如下。
<label>Label文字
<input type="checkbox" />
<span class="apple-checkbox-span"></span>
</label>
而实现的相关的css样式就是在class ".apple-checkbox-span" 后面,增加一个内Box,用:after实现,代码如下:
.apple-checkbox input[type="checkbox"] {
display: none;
} /*默认显示为正方形*/
.apple-checkbox-span {
display: inline-block;
margin-left: 1px;
margin-bottom: 3px;
width: 2em;
height: 1em;
vertical-align:middle;
background-color: lightgray; /*默认颜色*/
border-radius: 4px;
transition-duration: .5s; /*动画*/
-webkit-transition-duration: .5s; /* Safari */
} .apple-checkbox-span:after {
display: inline-block;
content: '';
width: 50%;
height: 100%;
border: 2px solid lightgray;
background-color: white;
border-radius: 4px;
float:left;
transition-duration: .5s; /*动画*/
-webkit-transition-duration: .5s; /* Safari */
} /*默认显示蓝色*/
.apple-checkbox input[type="checkbox"]:checked + .apple-checkbox-span {
background-color: deepskyblue;
} .apple-checkbox input[type="checkbox"]:checked + .apple-checkbox-span:after {
border-color: deepskyblue;
margin-left:50%;
}
而实现变更颜色的方法就是class中添加颜色的类名,代码为class="颜色类名", 而css只需建立覆盖CheckBox点击后的样式即可。
HTML
<label>红色
<input type="checkbox" />
<span class="apple-checkbox-span red"></span>
</label>
CSS
.apple-checkbox input[type="checkbox"]:checked + .apple-checkbox-span.red {
background-color: orangered;
} .apple-checkbox input[type="checkbox"]:checked + .apple-checkbox-span.red:after {
border-color: orangered;
}
对于CheckBox图形根据Label字体大小变化而变化的技巧是,尺寸单位需要使用em来定义,因为em是根据使用的字体大小而变化的一个单位,我们设置父标签Label的字体大小之后,span就自动继承了label的字体大小,宽高的通常设置是宽度是高度的两倍,当高度是1em,宽度就需要是2em,比如字体大小是14px,1em就等于14px,2em就等于28px,以此类推,参考代码:
HTML
<label style="font-size:30px">变更了字体大小30px
<input type="checkbox" />
<span class="apple-checkbox-span"></span>
</label>
CSS
.apple-checkbox-span {
width: 2em;
height: 1em;
}
最后要讲的是自定义文字和尺寸,定义文字就是内Box要显示的文字,可以内嵌css变更content的内容实现,而变更尺寸,则需要直接编写内嵌的css来覆盖width和height
<label id="ManualChar" style="font-size:30px">自定义文字<input type="checkbox" /><span class="apple-checkbox-span circle"></span></label>
<style type="text/css">
#ManualChar .apple-checkbox-span:after {
content: "弹"; /*添加文字*/
font-size: 0.6em; /*字体大小根据实际需要调整*/
font-weight: normal;
padding-top: 1px;
padding-left: 4px;
}
</style>
<label id="ManualSize" style="font-size:30px">自定义宽度<input type="checkbox" /><span class="apple-checkbox-span circle"></span></label>
<style type="text/css">
#ManualSize .apple-checkbox-span {
height: 30px; /*覆盖宽度*/
width: 400px; /*覆盖高度*/
} #ManualSize .apple-checkbox-span:after {
content: "祖国的花朵"; /*添加文字*/
width: 105px; /*宽度根据字数多少调整*/
font-size: 0.6em; /*字体大小根据实际需要调整*/
font-weight: normal;
padding-top: 1px;
padding-left: 4px;
} #ManualSize input[type="checkbox"]:checked + .apple-checkbox-span:after {
margin-left: 295px; /*点击之后块位置,需要根据块的宽度调整 400px-105px=295px;*/
}
</style>
如对上述的代码有任何疑问,欢迎各位留言。
附上源码: CheckBox
[原创] CSS自定义IOS苹果,Android安卓的CheckBox 效果,可以根据文字大小变化而变化,内框显示文字,另外可自定大小,自定颜色的更多相关文章
- ios中调用友盟分享时qq可以分享但是微信失败,只显示文字,网页链接没有出现
问题如下,最后在老大各种替换的情况下,找到了原因,是因为图片失效了,友盟分享微信时必须需要图片才可以,如果服务器图片失效,则会失败: 注意下面的图片是否能够获取???????????????????? ...
- 关于Unity程序在IOS和Android上显示内嵌网页的方式
近期因为有须要在Unity程序执行在ios或android手机上显示内嵌网页.所以遍从网上搜集了一下相关的资料.整理例如以下: UnityWebCore 从搜索中先看到了这个.下载下来了以后发现这个的 ...
- 二维码合成,将苹果和安卓(ios和android)合成一个二维码,让用户扫描一个二维码就可以分别下载苹果和安卓的应用
因为公司推广的原因,没有合适的将苹果和安卓(ios和android)合成一个二维码的工具. 因为这个不难,主要是根据浏览器的UA进行判断,所以就自己开发了一个网站 网站名称叫:好推二维码 https ...
- React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)
React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton) 一,需求与简单介绍 在开发项目时发现RN没有给提供RadioButton和Rad ...
- ios和android适配问题总结
_________________________________________________________________________________ 相关知识点 移动端. 适配(兼容). ...
- JS判断客户端是否是iOS或者Android或者ipad(二)
js判断客户端是IPAD和iphone 多了就不说了,直接上代码: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 funct ...
- ios和android适配
一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发 解决方案:css增加cursor:pointer; 三星手机遮罩层下的input.select.a等元素可以被点 ...
- 开园第一篇 - 论移动开发环境 IOS与Android的差异
首先,在真正写技术之前做个自我简介.本人08年开始学c语言 一年后,转vc++.开始接触MFC MFC做了两年.转眼11年了我考上了一个不知名的大专.搞C++发现没有市场了因为当时酷狗腾讯的软件已经日 ...
- iOS 和 Android 测试托管平台 FIR.im 的注册与常用功能
FIR.im 作为专业的 iOS 和 Android 测试包发布网站, 注册超简单,支持输入网址直接下载和二维码扫描下载.功能类似 TestFlight ,但又比它强大,支持游客访问密码,iOS 和 ...
- WebSocket学习笔记IE,IOS,Android等设备的兼容性问
WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...
随机推荐
- mysql-8版本优化建议
mysql-8版本优化 参考官方文档:https://dev.mysql.com/doc/refman/8.0/en/
- umi学习记录
菜单路由: 方法1:在config中配置全部路由,由后台返的的菜单进行匹配 方法2:动态注册路由和添加菜单--目前仅尝试了umi@2 的版本 原理:使用umi的运行时配置patchRoutes和ren ...
- CF468E Permanent 题解
考虑暴力状压 DP. 按行 DP,记录列哪些被选过,可以做到 \(O(2^kk^2)\). 注意到某一列扫完了之后这一列选没选过不重要,可以减少这里的状态. 简单优化一下,每次选择最少的一列,使这一列 ...
- 你有了解过无服务器架构(Serverless)数据库吗?
你有了解过无服务器架构(Serverless)数据库吗? 什么是Serverless呢?简单理解,Serverless 分为 FaaS 和 BaaS 两个部分,其中 FaaS 指的是函数即服务,Ba ...
- c# 在自定义类中控制form窗体中的控件 赋值或修改属性
c# 在自定义类中控制form窗体中的控件 赋值或修改属性 首先在 自定义类 的外面 声明一个 委托模块 //声明一个委托模块 用来改变form1 窗体中的控件值 public delegate v ...
- LinkedList的线程安全解决办法
方法一:List<String> list = Collections.synchronizedList(new LinkedList<String>()); 方法二:将Lin ...
- 以图搜图功能实现(windows10版)
1,原理 存储:通过Core项目调取python接口,python通过使用towhee把图片转成向量存在milvus向量数据库中. 查询:通过Core项目调取python接口,python根据查询的图 ...
- 单元测试成神之路——Golang篇
这位大佬写的太好了 https://zhangyuyu.github.io/golang-unit-test/
- 2015 for Mac PDF编辑软件
开始前请先断开网络连接,断网,断网,断网! 开始前请先断开网络连接,断网,断网,断网! 开始前请先断开网络连接,断网,断网,断网! 编辑 1.软件下载完成后,打开软件包如上图五个文件(第1个是安 ...
- 解决gpg: 从公钥服务器接收失败:服务器故障
xxx@xxx-virtual-machine:~/workspace/rv1126_rv1109_sdk$ sudo apt-key adv --keyserver hkp://keyserver. ...