纯css3替换CheckBox复选框和radio单选框的默认样式
在项目开发中我们经常会用到表单元素,而我们做出来的页面往往是要让用户看的,所以需要对表单默认的样式进行优化,这里以复选框 CheckBox 和单选框 radio 为例。自从有了 css3 这一切都变得那么简单,实现原理很简单,就是利用 input 与 label 相关联,对 label 进行美化并使其覆盖掉原本的 input,并利用旋转属性 transform 实现复选框中的那个“√”,当然也可以使用背景图片。接下来内容将给大家介绍两种实现方式,原理也大致相同,所以学会一种即可举一反三。网上也有好多相关例子,也有插件实现方法,但是本博主还是喜欢原生的实现方式,最后我也会给大家提供比较好的插件来满足大家不同的需求,最重要的还是想让大家学习插件里的实现原理方法,好了,开始步入正题。
代码没有那么难,但是有一些基础性的东西,需要我们了解一下,照顾一下新同学。
相邻兄弟选择器 “+”
语法解释
相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。
注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
HTML 代码:
<h1>This is a heading.</h1> <p>This is paragraph.</p>
效果:
transform 属性
Transform 属性应用于元素的 2D 或 3D 转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。
语法
transform: none|transform-functions;
值 | 描述 |
---|---|
none | 定义不进行转换。 |
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4×4 矩阵。 |
translate(x,y) | 定义 2D 转换。 |
translate3d(x,y,z) | 定义 3D 转换。 |
translateX(x) | 定义转换,只是用 X 轴的值。 |
translateY(y) | 定义转换,只是用 Y 轴的值。 |
translateZ(z) | 定义 3D 转换,只是用 Z 轴的值。 |
scale(x[,y]?) | 定义 2D 缩放转换。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 通过设置 X 轴的值来定义缩放转换。 |
scaleY(y) | 通过设置 Y 轴的值来定义缩放转换。 |
scaleZ(z) | 通过设置 Z 轴的值来定义 3D 缩放转换。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿着 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿着 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿着 Z 轴的 3D 旋转。 |
skew(x-angle,y-angle) | 定义沿着 X 和 Y 轴的 2D 倾斜转换。 |
skewX(angle) | 定义沿着 X 轴的 2D 倾斜转换。 |
skewY(angle) | 定义沿着 Y 轴的 2D 倾斜转换。 |
perspective(n) | 为 3D 转换元素定义透视视图。 |
浏览器支持
表格中的数字表示支持该属性的第一个浏览器版本号。
紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。
更多有关 transform 属性的学习请看《CSS3 变形与动画(上)》和《CSS3 变形与动画(下)》
方法一:css3 改变复选框和单选框的样式
HTML 代码:
<div class="con"> <h2>复选框:</h2> <span class="check_box"> <input type="checkbox" id="check_1"> <label for="check_1"></label> <em>苹果</em> </span> <br><br> <span class="check_box"> <input type="checkbox" id="check_2"> <label for="check_2"></label> <em>香蕉</em> </span> <br><br> <h2>单选框:</h2> <span class="radio_box"> <input type="radio" id="radio_1" name="radio" checked> <label for="radio_1"></label> <em>篮球</em> </span> <br><br> <span class="radio_box"> <input type="radio" id="radio_2" name="radio"> <label for="radio_2"></label> <em>电影</em> </span> </div>
css 代码:
body { font: menu; font-size: 16px; } .con { width: 1000px; margin: 0 auto; } h2 { font-weight: normal; color: #0CC; } em { font-style: normal; } /*复选*/ .check_box { display: inline-block; position: relative; } .check_box label { width: 16px; height: 16px; position: absolute; top: 0; left: 0; border: 2px solid #cacaca; border-radius: 50%; background: #fff; cursor: pointer; } .check_box label:hover { border: 2px solid #f78642; } .check_box label:after { content: ''; width: 8px; height: 4px; position: absolute; top: 4px; left: 3px; border: 2px solid #cacaca; border-top: none; border-right: none; opacity: 0.4; transform: rotate(-45deg); /*-webkit-transform:rotate(-45deg);*/ } .check_box label:hover:after { border: 2px solid #f78642; border-top: none; border-right: none; } .check_box input:checked+label { border: 2px solid #f78642; } .check_box input:checked+label:after { opacity: 1; border: 2px solid #f78642; border-top: none; border-right: none; } .check_box em { margin: 0 0 0 5px; } /*单选*/ .radio_box { display: inline-block; position: relative; } .radio_box label { width: 15px; height: 15px; position: absolute; top: 0; left: 0; border: 2px solid #ef4949; border-radius: 50%; background: #fff; cursor: pointer; } .radio_box input:checked+label:after { content: ''; width: 9px; height: 9px; position: absolute; top: 3px; left: 3px; background: #ef4949; border-radius: 50%; } .check_box em { margin: 0 0 0 5px; }
对于 IE8 以下嘛,当然不支持了,只能用默认样式了,所以用条件注释隐藏掉 label 吧。
<!--[if lte IE 8]> <style> .check_box label,.radio_box label{display:none;} </style> <![endif]-->
效果图:
方法二:纯 css3 替换 CheckBox 复选框和 radio 单选框的默认样式
HTML 代码:
<label><input type="checkbox"><i>✓</i>复选框</label><br> <label><input type="checkbox" checked><i>✓</i>复选框</label><br> <label><input type="checkbox" disabled><i>✓</i>复选框禁用</label><br> <label><input type="checkbox" disabled checked><i>✓</i>复选框禁用已选</label><br> <label><input type="radio" name="abc"><i>✓</i>单选框</label><br> <label><input type="radio" name="abc" checked><i>✓</i>单选框</label><br> <label><input type="radio" name="abc" disabled><i>✓</i>单选框禁用</label><br> <label><input type="radio" name="def" disabled checked><i>✓</i>单选框禁用已选</label><br>
css 代码:
label {font-size:12px;cursor:pointer;} label i {font-size:12px;font-style:normal;display:inline-block;width:12px;height:12px;text-align:center;line-height:12px;color:#fff;vertical-align:middle;margin:-2px 2px 1px 0px;border:#2489c5 1px solid;} input[type="checkbox"],input[type="radio"] {display:none;} input[type="radio"] + i {border-radius:7px;} input[type="checkbox"]:checked + i,input[type="radio"]:checked + i {background:#2489c5;} input[type="checkbox"]:disabled + i,input[type="radio"]:disabled + i {border-color:#ccc;} input[type="checkbox"]:checked:disabled + i,input[type="radio"]:checked:disabled + i {background:#ccc;}
效果图:
插件方法
一、css3 bootstrap 单选/复选框美化代码 下载[download id=”1203″]
css3 基于 bootstrap 制作单选框和复选框按钮美化,这是一款非常实用的表单按钮美化代码。
二、jQuery 单选框和复选框美化标签选择代码 下载[download id=”1206″]
以上内容就是今天关于 css3 替换 CheckBox 复选框和 radio 单选框的默认样式的所有方法,总有一款适合你。
码云笔记 » 纯css3替换CheckBox复选框和radio单选框的默认样式
感谢分享
谢谢支持