[原创] 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

转载于:https://www.cnblogs.com/Firstwing/p/9542911.html

[原创] CSS自定义IOS苹果，Android安卓的CheckBox 效果，可以根据文字大小变化而变化，内框显示文字，另外可自定大小，自定颜色...相关推荐

android设备如何苹果,Android安卓设备如何连接Mac的方法
Android安卓设备如何连接Mac的方法本篇文章主要给大家总结了安卓设备连接MAC电脑的方法以及中间遇到连接问题以后的处理办法. 平时大家用到最多的就是安卓手机和苹果电脑互连,由于安卓系统应用广泛 ...
switch+ios风格android,安卓仿IOS Switch开关按钮
老规矩,先放上一张图,对比一下安卓原生实现的Switch按钮和仿IOS实现的区别: Switch效果对比下面主要讲讲仿IOS Switch控件的实现,其实安卓Switch控件中提供了两个属性让我们去 ...
android 自定义五边形图片,Android自定义View-蜘蛛网属性图（五边形图）
首先看看效果图: 这里写图片描述先简要说一下这里需要涉及到的知识点: 高中基本的三角函数 Sin,Cos. 参考的文章: 这里为了尊重上面这篇文章的作者,需要说明一下,下面的代码有部分是参考上面这篇 ...
html点击文字展开图片,DIV CSS鼠标经过悬停在图片上时图片上方显示文字
DIV CSS鼠标悬停在没有文字内容图片上时图片上方显示文字,完全是纯css div实现.CSS实现鼠标悬停放图片上方时显示美化内容. 原始图片显示没有文字在上方,当鼠标经过悬停时显示文字并且文字背景 ...
php 上标和下标,css如何显示文字的上标和下标
在css中,可以使用vertical-align 属性的sub.super或者text-top.text-bottom属性值来显示文字的上标和下标.下面我们就来介绍一下css vertical-ali ...
iOS和android运存机制,为什么苹果4GB运存却比安卓8GB更丝滑流畅？看完立马涨知识了...
众所周知,目前智能手机分为苹果和安卓两大阵营.如今不管是苹果手机还是安卓手机在性能方面都越来越强大,为了进一步提升用户体验,安卓主流旗舰标配已达到了8G运存,顶配甚至达到了12G,最低也是4G起步,反 ...
android iphone css,css能判断手机是安卓还是ios吗？
前端写web页面的时候会遇到安卓手机与iOS手机页面展示不一样,还有就是在写APP的时候,此时就会遇到判断手机类型.那么css能够判断手机类型是安卓还是ios吗? css能判断手机是安卓还是ios吗? ...
为保护其App Store，苹果不惜拉踩安卓：iOS比Android更安全！
整理 | 祝涛出品 | CSDN(ID:CSDNnews) 据报道,在答复欧盟委员会数字市场行动的函件中,苹果援引诺基亚2019年.2020年的威胁情况报告称,安卓平台恶意软件的数量是iPhone的 ...
Android安卓仿IOS音量调节-自定义view系列（4）
Android安卓仿IOS音量调节-自定义view系列功能简介主要实现步骤 xml相关属性设置 java代码 Android技术生活交流更多其他页面-自定义View-实用功能合集:点击查看 Gi ...

[原创] CSS自定义IOS苹果，Android安卓的CheckBox 效果，可以根据文字大小变化而变化，内框显示文字，另外可自定大小，自定颜色...

[原创] CSS自定义IOS苹果，Android安卓的CheckBox 效果，可以根据文字大小变化而变化，内框显示文字，另外可自定大小，自定颜色...相关推荐

最新文章

热门文章