在经过对网上一些自定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 效果,可以根据文字大小变化而变化,内框显示文字,另外可自定大小,自定颜色的更多相关文章

  1. ios中调用友盟分享时qq可以分享但是微信失败,只显示文字,网页链接没有出现

    问题如下,最后在老大各种替换的情况下,找到了原因,是因为图片失效了,友盟分享微信时必须需要图片才可以,如果服务器图片失效,则会失败: 注意下面的图片是否能够获取???????????????????? ...

  2. 关于Unity程序在IOS和Android上显示内嵌网页的方式

    近期因为有须要在Unity程序执行在ios或android手机上显示内嵌网页.所以遍从网上搜集了一下相关的资料.整理例如以下: UnityWebCore 从搜索中先看到了这个.下载下来了以后发现这个的 ...

  3. 二维码合成,将苹果和安卓(ios和android)合成一个二维码,让用户扫描一个二维码就可以分别下载苹果和安卓的应用

    因为公司推广的原因,没有合适的将苹果和安卓(ios和android)合成一个二维码的工具. 因为这个不难,主要是根据浏览器的UA进行判断,所以就自己开发了一个网站 网站名称叫:好推二维码  https ...

  4. React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton)

    React Native之(支持iOS与Android)自定义单选按钮(RadioGroup,RadioButton) 一,需求与简单介绍 在开发项目时发现RN没有给提供RadioButton和Rad ...

  5. ios和android适配问题总结

    _________________________________________________________________________________ 相关知识点 移动端. 适配(兼容). ...

  6. 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 ...

  7. ios和android适配

    一些情况下对非可点击元素如(label,span)监听click事件,ios下不会触发 解决方案:css增加cursor:pointer; 三星手机遮罩层下的input.select.a等元素可以被点 ...

  8. 开园第一篇 - 论移动开发环境 IOS与Android的差异

    首先,在真正写技术之前做个自我简介.本人08年开始学c语言 一年后,转vc++.开始接触MFC MFC做了两年.转眼11年了我考上了一个不知名的大专.搞C++发现没有市场了因为当时酷狗腾讯的软件已经日 ...

  9. iOS 和 Android 测试托管平台 FIR.im 的注册与常用功能

    FIR.im  作为专业的 iOS 和 Android 测试包发布网站, 注册超简单,支持输入网址直接下载和二维码扫描下载.功能类似 TestFlight ,但又比它强大,支持游客访问密码,iOS 和 ...

  10. WebSocket学习笔记IE,IOS,Android等设备的兼容性问

    WebSocket学习笔记IE,IOS,Android等设备的兼容性问 一.背景 公司最近准备将一套产品放到Andriod和IOS上面去,为了统一应用的开发方式,决定用各平台APP嵌套一个HTML5浏 ...

随机推荐

  1. c#反射优化

    https://www.cnblogs.com/xinaixia/p/5777886.html https://www.cnblogs.com/xinaixia/p/5777961.html

  2. REDIS基础要点

    简述:redis 单实例,单进程,当线程处理用户请求数据,基于内存对数据处理.Redis默认分为0-16号库,每个库互相隔离(数据不共享) 基础复习: 1,系统中的每个进程对应有一个fd,通过网卡连接 ...

  3. 问题记录——nginx加载lua 模块,启动报错找不到 libluajit-5.1.so.2

    环境:SUSE 12 SP3 问题说明:根据工作需求,重新编译nginx加载 lua 模块后启动报错如下: 首先是尝试在 /etc/profile 配置文件中添加环境变量并 source /etc/p ...

  4. mybatis动态标签——trim

    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "- ...

  5. finalshell如何查看密码

    1.右键点击导出 2.打开导出的配置文件,搜索password,找到password的编码后的字符串复制 3.运行下面代码,即可查看原来的密码,把main()方法的字符串替换成上一步复制的字符串imp ...

  6. 解决Vue刷新后页面数据丢失的问题(sessionStorage和localStorage的用法)

    一.为什么刷新后数据会丢失 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失. 因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重 ...

  7. uni小程序保存base64图片

    使用uni.getFileSystemManager().writeFile去下载base64图片<view class="share-btn" @click="s ...

  8. 解决iview拖动头部横向滚动问题

    Vue.directive('dragsroll', { bind (my_el) { let elHeader = my_el.querySelector('div.ivu-table-header ...

  9. elementUI合并单元格

    <el-table :data="tableDataFormat" border :header-cell-style="{background:'#FAFAFA' ...

  10. spider_爬取斗图啦所有表情包(图片保存)

    """爬取斗图吧里面的所有表情包知识点总结: 一.使用requests库进行爬取,随机请求头(网站反爬措施少.挂个请求头足矣) 二.具体思路: 1.先爬取所有的图片url ...