中国学客联盟

 找回密码
 立即注册




查看: 1506725|回复: 1003

如何修改美化radio、checkbox的默认样式

  [复制链接]

[UID商城]   [抢购靓号]

站长

Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80

UID
9
威望
0
贡献
0
在线时间
2 小时
注册时间
2014-2-26
发表于 2019-3-4 19:49:17 | 显示全部楼层 |阅读模式
现在前端页面效果日益丰富,默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求,在此特地整理下修改radio、CheckBox样式的方法。
  原理:大致原理都是使用原生的checkbox或input标签,在其后面设置相关联的label元素。给<input>元素设置为透明,然后通过定位让用户看到的是<label>元素,利用css的原生属性来判断用户的操作,设置选中后的label样式,即 input[type=checkbox]:checked+label{}
 利用css3伪元素实现样式修改
  html代码
[backcolor=white !important][size=1em]
[size=1em]1

[size=1em]2

[size=1em]3

[size=1em]4

[size=1em]5

[size=1em]6

[size=1em]7

[size=1em]8

[size=1em]9

[size=1em]10

[size=1em][size=1em]<p>您的性别:</p>
[size=1em] <div class="radio-sex">
[size=1em]     <input type="radio" id="sex1" name="sex">
[size=1em]     <label for="sex1"></label>
[size=1em]     <span>男</span>
[size=1em] </div>
[size=1em] <div class="radio-sex">
[size=1em]     <input type="radio" id="sex2" name="sex">
[size=1em]     <label for="sex2"></label> 女
[size=1em] </div>



  css样式
[backcolor=white !important][size=1em]
[size=1em]1

[size=1em]2

[size=1em]3

[size=1em]4

[size=1em]5

[size=1em]6

[size=1em]7

[size=1em]8

[size=1em]9

[size=1em]10

[size=1em]11

[size=1em]12

[size=1em]13

[size=1em]14

[size=1em]15

[size=1em]16

[size=1em]17

[size=1em]18

[size=1em]19

[size=1em]20

[size=1em]21

[size=1em]22

[size=1em]23

[size=1em]24

[size=1em]25

[size=1em]26

[size=1em]27

[size=1em]28

[size=1em]29

[size=1em]30

[size=1em]31

[size=1em]32

[size=1em]33

[size=1em]34

[size=1em]35

[size=1em]36

[size=1em]37

[size=1em]38

[size=1em]39

[size=1em]40

[size=1em]41

[size=1em]42

[size=1em]43

[size=1em]44

[size=1em]45

[size=1em]46

[size=1em]47

[size=1em][size=1em].radio-sex {
[size=1em]    position: relative;
[size=1em]    display: inline-block;
[size=1em]    margin-right: 12px;
[size=1em]}

[size=1em].radio-sex input {
[size=1em]    vertical-align: middle;
[size=1em]    margin-top: -2px;
[size=1em]    margin-bottom: 1px;
[size=1em]    /* 前面三行代码是为了让radio单选按钮与文字对齐 */
[size=1em]    width: 20px;
[size=1em]    height: 20px;
[size=1em]    appearance: none;/*清楚默认样式*/
[size=1em]    -webkit-appearance: none;
[size=1em]    opacity: 0;
[size=1em]    outline: none;
[size=1em]    /* 注意不能设置为display:none*/
[size=1em]}

[size=1em].radio-sex label {
[size=1em]    position: absolute;
[size=1em]    left: 0;
[size=1em]    top: 0;
[size=1em]    z-index: -1;
[size=1em]    /*注意层级关系,如果不把label层级设为最低,会遮挡住input而不能单选*/
[size=1em]    width: 20px;
[size=1em]    height: 20px;
[size=1em]    border: 1px solid #3582E9;
[size=1em]    border-radius: 100%;
[size=1em]}

[size=1em].radio-sex input:checked+label {
[size=1em]    background: #3582E9;
[size=1em]}

[size=1em].radio-sex input:checked+label::after {
[size=1em]    content: "";
[size=1em]    position: absolute;
[size=1em]    left: 8px;
[size=1em]    top: 2px;
[size=1em]    width: 5px;
[size=1em]    height: 12px;
[size=1em]    border-right: 1px solid #fff;
[size=1em]    border-bottom: 1px solid #fff;
[size=1em]    transform: rotate(45deg);
[size=1em]}



  优点:充分借助了CSS3的优势,无需使用js和图片,仅用纯CSS3就可搞定
  缺点:兼容性较差,仅支持IE9+
  案例:
 利用图片实现样式修改
  实现思路
  1.设置input 属性hidden对该input进行隐藏
[backcolor=white !important][size=1em]
[size=1em]1

[size=1em][size=1em]<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>



  2.借助label for标签通过id绑定input ,这样在点击label时实际就是点击了input
[backcolor=white !important][size=1em]
[size=1em]1

[size=1em]2

[size=1em][size=1em]<input type="radio" name="type" id="adviceRadio1" value="1" checked hidden/>
[size=1em]                <label for="adviceRadio1" class="advice"></label>



  3.定义label的样式,设置未选中状态的背景图
[backcolor=white !important][size=1em]
[size=1em]1

[size=1em]2

[size=1em]3

[size=1em]4

[size=1em]5

[size=1em]6

[size=1em]7

[size=1em]8

[size=1em]9

[size=1em]10

[size=1em][size=1em].advice{
[size=1em]                    height: 12px;
[size=1em]                    width: 12px;
[size=1em]                    display: inline-block;
[size=1em]                    background-image: url('[color=blue !important][size=1em]https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-unchecked.png');
[size=1em]                    background-repeat: no-repeat;
[size=1em]                    background-position: center;
[size=1em]                    vertical-align: middle;
[size=1em]                    margin-top: -4px;
[size=1em]                }



  4.使用相邻选择器设置选中状态label的样式
[backcolor=white !important][size=1em]
[size=1em]1

[size=1em]2

[size=1em]3

[size=1em][size=1em]input[type="radio"]:checked + .advice{
[size=1em]                    background-image: url('[color=blue !important][size=1em]https://caiyunupload.b0.upaiyun.com/newweb/imgs/icon-checked.png');
[size=1em]                }



  以上是radio单选框的实现代码,checkbox也是类似 将input type定义成checkbox即可
 利用插件实现  awesome-bootstrap-checkbox插件
  awesome-bootstrap-checkbox是一款可以美化Bootstrap复选框和单选按钮的插件。它使用纯CSS编写,没有任何的javascript文件。它通过在原生Bootstrap组件的基础上做一些小改动,即可完成漂亮的美化效果。
  注:需要引入awesome-bootstrap-checkbox.css、font-awesome.css以及font awesome对应的字体font文件
  pretty.css
  pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用,对原生的checkbox和radio进行美化,还可以制作按钮点击时的动画效果。

中国学客联盟

[UID商城]   [抢购靓号]

高级会员

Rank: 4

UID
3638795
威望
0
贡献
0
在线时间
0 小时
注册时间
2015-8-31
发表于 2019-3-4 19:49:18 来自手机 | 显示全部楼层
好地方,默默过来看看
中国学客联盟

[UID商城]   [抢购靓号]

高级会员

Rank: 4

UID
3638433
威望
0
贡献
0
在线时间
0 小时
注册时间
2015-7-11
发表于 2019-3-4 19:49:19 | 显示全部楼层
呵呵。。。
中国学客联盟

[UID商城]   [抢购靓号]

高级会员

Rank: 4

UID
3638144
威望
0
贡献
0
在线时间
0 小时
注册时间
2015-7-11
发表于 2019-3-4 19:49:19 来自手机 | 显示全部楼层
前排顶,很好!
中国学客联盟

[UID商城]   [抢购靓号]

高级会员

Rank: 4

UID
3638117
威望
0
贡献
0
在线时间
0 小时
注册时间
2015-7-11
发表于 2019-3-4 19:49:20 来自手机 | 显示全部楼层
不错 支持下
中国学客联盟

[UID商城]   [抢购靓号]

高级会员

Rank: 4

UID
3638295
威望
0
贡献
0
在线时间
0 小时
注册时间
2015-7-11
发表于 2019-3-4 19:49:20 | 显示全部楼层
不错 支持一个了
中国学客联盟

[UID商城]   [抢购靓号]

高级会员

Rank: 4

UID
3638779
威望
0
贡献
0
在线时间
0 小时
注册时间
2015-8-31
发表于 2019-3-4 19:49:20 | 显示全部楼层
好东西,呜呜呜呜呜呜
中国学客联盟

[UID商城]   [抢购靓号]

高级会员

Rank: 4

UID
3638164
威望
0
贡献
0
在线时间
0 小时
注册时间
2015-7-11
发表于 2019-3-4 19:49:21 | 显示全部楼层
小白一个 顶一下
中国学客联盟

[UID商城]   [抢购靓号]

高级会员

Rank: 4

UID
3638978
威望
0
贡献
0
在线时间
0 小时
注册时间
2015-9-12
发表于 2019-3-4 19:49:21 来自手机 | 显示全部楼层
鼎力支持!!
中国学客联盟

[UID商城]   [抢购靓号]

高级会员

Rank: 4

UID
3638287
威望
0
贡献
0
在线时间
0 小时
注册时间
2015-7-11
发表于 2019-3-4 19:49:21 来自手机 | 显示全部楼层
为保住菊花,这个一定得回复!
中国学客联盟
高级模式
B Color Image Link Quote Code Smilies

本版积分规则

快速回复 返回顶部 返回列表