企业网站,个人博客等WordPress网站以及其他语言网站开发定制需求加QQ详聊。

纯css3替换CheckBox复选框和radio单选框的默认样式

HTML CSS 码云 76℃ 0评论
目录
[隐藏]

在项目开发中我们经常会用到表单元素,而我们做出来的页面往往是要让用户看的,所以需要对表单默认的样式进行优化,这里以复选框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单选框的默认样式

方法二:纯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替换CheckBox复选框和radio单选框的默认样式

插件方法

一、css3 bootstrap单选/复选框美化代码 下载 icheck-bootstrap.zip (下载5)

css3基于bootstrap制作单选框和复选框按钮美化,这是一款非常实用的表单按钮美化代码。

css3 bootstrap单选/复选框美化代码

二、jQuery单选框和复选框美化标签选择代码 下载 jQuery单选框和复选框美化标签选择代码 (下载7)

jQuery单选框跟复选框美化代码

 

以上内容就是今天关于css3替换CheckBox复选框和radio单选框的默认样式的所有方法,总有一款适合你。

转载请注明:码云笔记 » 纯css3替换CheckBox复选框和radio单选框的默认样式

喜欢 (3)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(2)个小伙伴在吐槽
  1. 码云
    感谢分享
    晓宇2018-10-20 20:11 回复
    • 码云
      谢谢支持
      mybj2018-10-22 10:18 回复