设计过程出现一个困难问题,一个php生成的HTML页面有多个表格,要求必须自动分开打印到几张A4纸张上面.经过询问资深人士,结果统一回答,HTML页面无法做打印时自动分页面打印.于是乎正准备放弃这个分页面打印念头,郁闷着被笑话着被困扰着. 一个表格被分开打印到两张A4上,多难看啊.... 无意中翻阅CSS,发现里面有两语句:page-break-beforepage-break-after 分别对应的 参数是: auto; always; left; right;…
May 5, 2015
用纯 CSS 为 HTML checkbox 添加自定义样式及动画效果
一般情况下,<input type="checkbox">
元素(也包括一部分其他input
元 素)是由操作系统(而非浏览器)进行渲染的。在不同操作系统下,这类特殊元素的样式往往和系统本身的风格一致,和浏览器无关。也正是由于这种机制,开发者 无法像一般元素那样使用 CSS 来修饰这类元素。这里介绍一种利用纯 CSS 实现自定义 checkbox 样式的方法。思路很简单:由于控件所对应的label
元素是可以点击并切换控件状态的,而label
元素的样式又可以自由设定,因此我们可将input
元素隐藏,通过label
元素实现交互。
HTML 代码如下:
<input type="checkbox" id="checkbox" class="checkbox"/> <div class="checkbox-wrapper"> <label for="checkbox" class="checkbox-label"></label> </div>
样式一:Metro UI 风格
CSS 代码如下:
.checkbox-wrapper { width: 80px; height: 32px; position: relative; display: inline-block; overflow: hidden; } .checkbox { display: none; } .checkbox-label::before, .checkbox-label::after { font-family: sans-serif; font-size: 13px; color: #ffffff; position: absolute; font-weight: bold; line-height: 32px; height: 32px; width: 40px; text-align: center; } .checkbox-label::before { content: 'ON'; left: -40px; background: #45b6af; } .checkbox-label::after { content: 'OFF'; right: -40px; background: #f3565d; } .checkbox-label { display: block; position: absolute; left: 0; width: 40px; height: 32px; transition: all .4s ease; cursor: pointer; background: #dddddd; } .checkbox:checked + .checkbox-wrapper .checkbox-label { left: 40px; }
样式二:iOS 7 风格
CSS代码如下:
.checkbox-wrapper { width: 58px; height: 32px; position: relative; display: inline-block; background: #ffffff; border-radius: 16px; transition: all .3s ease-out; box-shadow: 0px 0px 0px 2px #ddd; } .checkbox { display: none; } .checkbox-label { display: block; position: absolute; left: 0px; top: 0px; width: 32px; height: 32px; cursor: pointer; background: #ffffff; border-radius: 16px; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); transition: all .3s ease-out; } .checkbox:checked + .checkbox-wrapper { background: #0bd318; box-shadow: 0px 0px 0px 2px #0bd318; } .checkbox:checked + .checkbox-wrapper .checkbox-label { left: 26px; }
值得一提的是,这个例子虽然比较完美的还原了 iOS 7 中 UISwitch 控件的外观,但是动画曲线却还有些差距。iOS 7 中使用的是一种名为 String Animation 的动画(该 API 在 iOS 8 中已经公开),仔细看的话可以发现开始滑块移动很快,到后面逐渐变慢,并且结束时还有小幅度的「反弹」效果。这里我们为了方便,使用 ease-out 来模拟。
JSFiddle
点击此处查看本教程在 JSFiddle 的示范代码。
.demo { margin: 15px; } /* Metro UI Style */ .demo-1 .checkbox-wrapper { width: 80px; height: 32px; position: relative; display: inline-block; overflow: hidden; } .demo-1 .checkbox { display: none; } .demo-1 .checkbox-label:before, .demo-1 .checkbox-label:after { font-family: sans-serif; font-size: 13px; color: #ffffff; position: absolute; font-weight: bold; line-height: 32px; height: 32px; width: 40px; text-align: center; } .demo-1 .checkbox-label:before { content: 'ON'; left: -40px; background: #45b6af; } .demo-1 .checkbox-label:after { content: 'OFF'; right: -40px; background: #f3565d; } .demo-1 .checkbox-label { display: block; position: absolute; left: 0; width: 40px; height: 32px; transition: all .4s ease; cursor: pointer; background: #dddddd; } .demo-1 .checkbox:checked + .checkbox-wrapper .checkbox-label { left: 40px; } /* iOS 7 Style */ .demo-2 .checkbox-wrapper { width: 58px; height: 32px; position: relative; display: inline-block; background: #ffffff; border-radius: 16px; transition: all .3s ease-out; box-shadow: 0px 0px 0px 2px #ddd; } .demo-2 .checkbox { display: none; } .demo-2 .checkbox-label { display: block; position: absolute; left: 0px; top: 0px; width: 32px; height: 32px; cursor: pointer; background: #ffffff; border-radius: 16px; box-shadow: 0px 2px 3px rgba(0,0,0,0.2); transition: all .3s ease-out; } .demo-2 .checkbox:checked + .checkbox-wrapper { background: #0bd318; box-shadow: 0px 0px 0px 2px #0bd318; } .demo-2 .checkbox:checked + .checkbox-wrapper .checkbox-label { left: 26px; } <div class="demo demo-1"> <input type="checkbox" id="checkbox" class="checkbox"/> <div class="checkbox-wrapper"> <label for="checkbox" class="checkbox-label"></label> </div> </div> <div class="demo demo-2"> <input type="checkbox" id="checkbox-2" class="checkbox"/> <div class="checkbox-wrapper"> <label for="checkbox-2" class="checkbox-label"></label> </div> </div>