码云笔记前端博客
Home > HTML/CSS > 纯css3替换CheckBox复选框和radio单选框的默认样式

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

2018-10-19 分类:HTML/CSS 作者:码云 阅读(513)

本文共计3928个字,预计阅读时长需要10分钟。

在项目开发中我们经常会用到表单元素,而我们做出来的页面往往是要让用户看的,所以需要对表单默认的样式进行优化,这里以复选框CheckBox和单选框radio为例。自从有了css3这一切都变得那么简单,实现原理很简单,就是利用input与label相关联,对label进行美化并使其覆盖掉原本的input,并利用旋转属性transform实现复选框中的那个“√”,当然也可以使用背景图片。接下来内容将给大家介绍两种实现方式,原理也大致相同,所以学会一种即可举一反三。网上也有好多相关例子,也有插件实现方法,但是本博主还是喜欢原生的实现方式,最后我也会给大家提供比较好的插件来满足大家不同的需求,最重要的还是想让大家学习插件里的实现原理方法,好了,开始步入正题。

代码没有那么难,但是有一些基础性的东西,需要我们了解一下,照顾一下新同学。

相邻兄弟选择器 "+"

语法解释

相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。

注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。

相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。

选择相邻兄弟

如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。

例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:

1
h1 + p {margin-top:50px;}

这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。

HTML代码:

1
2
<h1>This is a heading.</h1>
<p>This is paragraph.</p>

效果:

相邻兄弟选择器

transform 属性

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转,缩放,移动,倾斜等。

语法

1
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 个值的 4x4 矩阵。
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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
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吧。

1
2
3
4
5
<!--[if lte IE 8]>
<style>
.check_box label,.radio_box label{display:none;}
</style>
<![endif]-->

效果图:

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

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

HTML代码:

1
2
3
4
5
6
7
8
<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代码:

1
2
3
4
5
6
7
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单选/复选框美化代码 下载[download id="1203"]

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

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

二、jQuery单选框和复选框美化标签选择代码 下载[download id="1206"]

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

 

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

「除特别注明外,本站所有文章均为码云笔记原创,转载请保留出处!」

赞(4) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
4

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

你可能感兴趣

共有 2 条评论 - 纯css3替换CheckBox复选框和radio单选框的默认样式

  1. 晓宇 iPad Safari 604.1

    感谢分享

    1. mybj Windows 7 Chrome 63.0.3239.132

      @晓宇谢谢支持

博客简介

码云笔记 mybj123.com,一个专注Web前端开发技术的博客,主要记录和总结博主在前端开发工作中常用的实战技能及前端资源分享,分享各种科普知识和实用优秀的代码,以及分享些热门的互联网资讯和福利!码云笔记有你更精彩!
更多博客详情请看关于博客

精彩评论

站点统计

  • 文章总数: 458 篇
  • 分类数目: 13 个
  • 独立页面: 8 个
  • 评论总数: 215 条
  • 链接总数: 14 个
  • 标签总数: 1011 个
  • 建站时间: 495 天
  • 访问总量: 8647972 次
  • 最近更新: 2019年10月21日