特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
iPhone上的UI的确是精致,让人爱不释手。今天用CSS3写了一个Checkbox的效果,采用了两种不同的方法来实现,另外在此基础上写了一个我们常用的checkbox的效果。
众所周知,想要美化表单中的元件,都少不了jQuery的帮忙,有关于这方面的介绍,本站也有过几篇相关的文章,比如说《美化表单——自定义单选按钮和复选按钮》、《自定义表单——JQuery制作个性化Checkbox》和《美化表单——自定义Checkbox和Radio样式》。那么有没有办法不使用jQuery呢?就是大家所说的纯CSS?如果你看了这篇文章后,你就会说,原来也可以实现呀。
今天这篇教程,我就想摆脱jQuery,使用CSS3来制作一个类似iPhone上的Checkbox效果。
针对上面的DEMO效果,下面我给大家介绍两种实现方法:
方法一:标签实现
实现原理
通过label标签的for属性来控制checkbox选择状态,至于选择和不选择此处使用ON和OFF来分别代替,接着借助一个空的标签来制作一个盖板,使用定位来遮住ON或者OFF,从而实现Checkbox的选择与否的效果。
HTML Markup
<div class="labelWrap"> <label for="onOff" id="sliderLabel"> <input type="checkbox" id="onOff" /> <span id="slider"> <span id="sliderOn">ON</span> <span id="sliderOff">OFF</span> <span id="slideBlock"></span> </span> </label> <span id="lableTitle">Wi-Fi</span> </div>
这里有一个关键处,是label标签的for属性值要与input[type="checkbox"]的id属性值一致。
CSS Code
/*-------------------------*\ * Demo1 \*-------------------------*/ .labelWrap { width: 200px; margin: 0 auto; overflow: hidden; } /*==checkbox容器样式==*/ #sliderLabel { border: 1px solid #555; border-radius: 4px; cursor: pointer; display: block; height: 30px; overflow: hidden;/*==这个值很重要,将超出容器部分隐藏==*/ position: relative; width: 100px; float: left; margin-right: 10px; } /*==隐藏input[type="checkbox"]==*/ #onOff { border: 0 none !important; clip: rect(1px,1px,1px,1px); height: 1px !important; overflow: hidden !important; position: absolute !important; width: 1px !important; } /*==checkbox处于默认状态位置(未选中)==*/ #slider { left: -50px;/*定位在OFF位置*/ position: absolute; top: 0; -moz-transition: left 0.25s ease-out; -webkit-transition: left 0.25s ease-out; -o-transition: left 0.25s ease-out; -ms-transition: left 0.25s ease-out; transition: left 0.25s ease-out; } /*==ON、OFF和盖板定位位置==*/ #sliderOn, #slideBlock, #sliderOff { display: block; font-family: arial, verdana,sans-serif; font-weight: bold; height: 30px; line-height: 30px; position: absolute; text-align: center; top: 0px; text-shadow: #093B5C 0px -1px 1px; color: #fff; } /*==ON按钮效果==*/ #sliderOn { background: -webkit-linear-gradient(19% 75% 90deg,#3095C7
如需转载,烦请注明出处:https://www.w3cplus.com/css3/css3-style-iphone-checkbox
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!