复选框样式化综合

最新推荐文章于 2022-06-23 23:42:52 发布
最新推荐文章于 2022-06-23 23:42:52 发布
阅读量5.1k 收藏
点赞数
分类专栏： form 文章标签： 复选框 checkbox 复选框样式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ly2983068126/article/details/47606241
版权





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Checkbox��ʽ</title>
<style type="text/css" media="screen">
body{color:#444;font-size:1.6em;background:#ccc;}
.container{width:90%;margin:20px 3%;padding:25px;min-height:400px;height:auto;background: #FFF;}
section{float:left;width:30%;margin:20px 20px;}
hr{ clear:both;}
/*** Start by hiding the checkboxes */
input[type=checkbox] {visibility: hidden;}
/** * Create the slider bar */
.checkboxOne { width: 40px;height: 10px;background: #555;margin: 20px 80px;position: relative;border-radius: 3px;}
/** * Create the slider from the label */
.checkboxOne label {display: block;width: 16px;height: 16px;border-radius: 50%;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;cursor: pointer;position: absolute;top: -3px;left: -3px;background: #ccc;}
/** * Move the slider in the correct position if the checkbox is clicked*/
.checkboxOne input[type=checkbox]:checked + label {left: 27px;}
/** * Checkbox Two */
.checkboxTwo {width: 120px;height: 40px;background: #333;margin: 20px 60px;border-radius: 50px;position: relative;}
/** * Create the line for the circle to move across */
.checkboxTwo:before {content: '';position: absolute;top: 19px;left: 14px;height: 2px;width: 90px;background: #111;}
/** * Create the circle to click */
.checkboxTwo label {display: block;width: 22px;height: 22px;border-radius: 50%;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;cursor: pointer;position: absolute;top: 9px;z-index: 1;left: 12px;background: #ddd;}
/* * Create the click event for the checkbox*/
.checkboxTwo input[type=checkbox]:checked + label {left: 84px;background: #26ca28;}
/** * Checkbox Three */
.checkboxThree {width: 120px;height: 40px;background: #333;margin: 20px 60px;border-radius: 50px;position: relative;}
/** * Create the text for the On position */
.checkboxThree:before {content: 'On';position: absolute;top: 12px;left: 13px;height: 2px;color: #26ca28;font-size: 16px;}
/** * Create the label for the off position */
.checkboxThree:after { content: 'Off';position: absolute;top: 12px;left: 84px;height: 2px;color: #ddd;font-size: 16px;}
/** * Create the pill to click */
.checkboxThree label {display: block;width: 52px;height: 22px;border-radius: 50px;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;cursor: pointer;position: absolute;top: 9px;z-index: 1;left: 12px;background: #ddd;}
/** * Create the checkbox event for the label * @type {[type]} */
.checkboxThree input[type=checkbox]:checked + label { left: 60px;background: #26ca28;}
/** * Checkbox Four */
.checkboxFour {width: 40px;height: 40px;background: #ddd;margin: 20px 90px; border-radius: 100%;position: relative;-webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);-moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.5);box-shadow: 0px 1px 3px rgba(0,0,0,0.5);}
/** * Create the checkbox button */
.checkboxFour label {display: block;width: 30px;height: 30px;border-radius: 100px;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;-ms-transition: all .5s ease;transition: all .5s ease;cursor: pointer;position: absolute;top: 5px;left: 5px;z-index: 1;background: #333;-webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);-moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);}
/** * Create the checked state */
.checkboxFour input[type=checkbox]:checked + label {background: #26ca28;}
/** * Checkbox Five */
.checkboxFive {width: 25px;margin: 20px 100px;position: relative;}
/** * Create the box for the checkbox */
.checkboxFive label { cursor: pointer;position: absolute;width: 25px;height: 25px;top: 0;left: 0;background: #eee;border:1px solid #ddd;}
/** * Display the tick inside the checkbox */
.checkboxFive label:after {opacity: 0.2;content: '';position: absolute;width: 9px;height: 5px;background: transparent;top: 6px;left: 7px;border: 3px solid #333;border-top: none;border-right: none;-webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg);}
/** * Create the hover event of the tick */
.checkboxFive label:hover::after {opacity: 0.5;}
/** * Create the checkbox state for the tick */
.checkboxFive input[type=checkbox]:checked + label:after {opacity: 1;}
</style>
</head>
<body>
<section class="container">
<section>
  <div class="checkboxOne">
  <input type="checkbox" value="1" id="checkboxOneInput" name="" />
  <label for="checkboxOneInput"></label>
  </div>
</section>
<section>
  <div class="checkboxTwo">
  <input type="checkbox" value="1" id="checkboxTwoInput" name="" />
  <label for="checkboxTwoInput"></label>
  </div>
</section>
<section>
  <div class="checkboxThree">
  <input type="checkbox" value="1" id="checkboxThreeInput" name="" />
  <label for="checkboxThreeInput"></label>
  </div>
</section>
<section>
  <div class="checkboxFour">
  <input type="checkbox" value="1" id="checkboxFourInput" name="" />
  <label for="checkboxFourInput"></label>
  </div>
</section>
<section>
  <div class="checkboxFive">
  <input type="checkbox" value="1" id="checkboxFiveInput" name="" />
  <label for="checkboxFiveInput"></label>
  </div>
</section>
    <div style="clear:both;"></div>
</section>
</body>
</html>

复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般就像下面这样：

 选中状态  未选状态

这取决于操作系统和浏览器，有些时候，这种样子并不能满足设计要求，这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式，比如拿到这样一张设计图：

在过去，想要通过简单地修改样式达成这种设计效果根本不行，不过，现在借助强大的 CSS3 属性 appearance 可以对该类控件有空前的样式控制能力：

input[type="checkbox"] {
  -webkit-appearance: none;
}

这样设置该属性值为 none 就去掉了复选框原有的呈现方式，变成了一个普普通通的元素，然后就可以为之应用样式了，添加如下样式：


input[type="checkbox"] {
  -webkit-appearance: none;
  background: #fff url(i/blue.png);
  height: 22px;
  vertical-align: middle;
  width: 22px;
}

通过结合使用状态伪类选择器 :checked 可以为选中状态下的 checkbox 设置不同的样式，用以从视觉上区别：

input[type="checkbox"]:checked {
  background-position: -48px 0;
}

此时点击复选框，可以看到复选框样式的变化效果，另外，根据那张设计图片所示还得加上获取焦点，禁用等状态的样式：

input[type="checkbox"]:focus,
input[type="checkbox"]:hover {
  background-position: -24px 0;
  outline: none;
}

input[type="checkbox"]:checked {
  background-position: -48px 0;
}

input[type="checkbox"][disabled] {
  background-position: -72px 0;
}

input[type="checkbox"][disabled]:checked {
  background-position: -96px 0;
}

因为图片已经事先合并成一张了，简单修改一下 background-position 就可以了，同时前面几个选择器的优先级（权重）一样，所以书写顺序很重要。

兼容性

目前只兼容 Webkit 系列浏览器；虽然 Firefox 也实现了替代的 -moz-appearance 属性，不过控件原有的背景颜色、边框样式无法修改，暂时也不大好用；IE 系列暂时不支持该属性，更详细的兼容情况查看 Caniuse/appearance。因此需要为 IE 浏览器清除掉背景图片的影响：


input[type="checkbox"] {
  background: #fff url(i/blue.png);
  background: none\0;
  *background: none;
  ...
}

为了兼容更多的主流浏览器，需要寻求另外的解决方案，在所有主流浏览器里，点击关联某个复选框的 label 时，产生的效果和点击元素自身相同，会切换复选框控件的选中状态。浏览器的这种行为给了我们一个至关重要的挂钩，既然能依靠 label 元素来控制原生复选框的状态，那么就可以不必直接操作实际的复选框元素，而把操作和样式都转移到与之关联的 label 元素上去：

<input id="example" type="checkbox">
<label for="example"></label>

确保 label 元素的 for 属性的值和复选框 input 的 id 值一致，同时将 label 元素放置于 input 之后，这样 CSS 可以通过相邻兄弟选择器（Adjacent sibling selector）定位到这个 label 元素并为之应用样式：


input[type="checkbox"] + label:before {
  background: #fff url(i/blue.png);
  content: " ";
  height: 22px;
  left: 0;
  position: absolute;
  width: 22px;
}

有了样式化的 label 元素来提供交互，原生的 checkbox 控件就显得有点多余了，虽然可以用 display: none 把它隐藏掉，不过隐藏后的表单元素是不能获得焦点的，所以最好的方式还是用 label 元素把它遮住，这样既能支持键盘交互，同时当图片加载失败的时候，又能保证原生的控件可用：


input[type="checkbox"] {
  box-sizing: border-box;
  left: 4px;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 3px;
}

图片要足够大能将原生的 checkbox 控件完全遮挡住，因为这里用到了绝对定位，所以需要增加一个定位参照：


<!-- HTML -->
<div class="checkbox">
  <input id="exampleCheckbox" type="checkbox">
  <label for="exampleCheckbox"></label>
</div>

/* CSS */
.checkbox {
  min-height: 24px;
  padding-left: 24px;
  position: relative;
}

左边预留内边距是为了排版更美观，同时，和之前一样，搭配上其它状态下的样式：


input[type="checkbox"]:focus + label:before,
input[type="checkbox"] + label:hover:before {
  background-position: -24px 0;
}

input[type="checkbox"]:checked + label:before {
  background-position: -48px 0;
}

input[type="checkbox"][disabled] + label:before {
  background-position: -72px 0;
}

input[type="checkbox"][disabled]:checked + label:before {
  background-position: -96px 0;
}

兼容性

只要支持 CSS3 selectors 的浏览器基本上都能兼容，同时具备原生控件的绝大多数交互特性。IE 8 不支持 :checked 伪类选择器，将伪元素:before 修改为双冒号 ::before 可以去掉对 IE 8 的影响：

input[type="checkbox"] + label::before { ... }

关于伪元素生成内容的兼容性见 CSS Generated content for pseudo-elements。诚然，上面的方法假设了支持 :checked 伪类选择器的浏览器同时也支持双冒号伪元素写法，而不支持的浏览器则都不支持，这是一种不太好的方式，这种假设事实上也是不正确的，造成了部分老旧浏览器不可用的问题，如果使用 :not() 选择器则更为合理，使用 :not(:checked) 来为未选中的控件添加样式，:not() 和 :checked 同属一个规范css3-selectors，兼容性应该一致 CSS3 selectors。不过写法有点变化，:checked 和 :not(:checked) 都需要添加上基本的样式：


input[type="checkbox"]:checked + label:before,
input[type="checkbox"]:not(:checked) + label:before {
  background: #fff url(i/blue.png);
  content: " ";
  height: 22px;
  left: 0;
  position: absolute;
  width: 22px;
}

input[type="checkbox"]:not(:checked):focus + label:before,
input[type="checkbox"]:not(:checked) + label:hover:before {
  background-position: -24px 0;
}

input[type="checkbox"]:checked + label:before {
  background-position: -48px 0;
}

input[type="checkbox"][disabled]:not(:checked) + label:before {
  background-position: -72px 0;
}

input[type="checkbox"][disabled]:checked + label:before {
  background-position: -96px 0;
}

查看简单示例，对于那些并不支持 :checked 伪类选择器的浏览器（比如 IE 8），则可以借助 javaScript 来根据控件状态修改真正的 class 属性达到区分不同状态的目的，比如根据是否被选中来添加或删除一个 checked 的 class：


// jQuery
$('input[type="checkbox"]').on('change', function() {
  $(this)[$(this).prop('checked') ? 'addClass' : 'removeClass']('checked');
});

/* CSS */
input[type="checkbox"].checked + label:before { ... }

有了前面的基础，要制作类似于开关按钮的控件也是非常简单的了，还是熟悉的结构：

<div class="checkbox">
  <input id="example" type="checkbox">
  <label for="example">Check</label>
</div>

首先勾勒出开关的形状，一个圆角矩形中间放一个圆形按钮：


input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label {
  background-color: #e0e0e0;
  border-radius: 24px;
  cursor: pointer;
  display: inline-block;
  height: 24px;
  position: relative;
  text-indent: -9999px;
  width: 48px;
}

input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
  background-color: #fff;
  border-radius: 20px;
  content: " ";
  height: 20px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 20px;
}

选中的效果只要简单修改下外框的背景色和中间按钮的位置就行：


input[type="checkbox"]:checked + label {
  background-color: #8c8;
}

input[type="checkbox"]:checked + label:after {
  left: 26px;
}

不过这种跳跃式变化实在是太生硬了，添加点过渡效果，看上去更平滑：


input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label {
  -webkit-transition: background-color 0.3s;
          transition: background-color 0.3s;
}

input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
  -webkit-transition: left 0.3s;
          transition: left 0.3s;
}

点击就能看到效果，对于中间的按钮部分使用 CSS3 Transforms 来替代 left 效果更好，速度更快：


input[type="checkbox"]:checked + label:after,
input[type="checkbox"]:not(:checked) + label:after {
  -webkit-transition: left -webkit-transform 0.3s;
       -o-transition:           -o-transform 0.3s;
          transition: left         transform 0.3s;
}

input[type="checkbox"]:checked + label:after {
  left: 26px;
  -webkit-transform: translateX(24px);
      -ms-transform: translateX(24px);
       -o-transform: translateX(24px);
          transform: translateX(24px);
}

不支持 CSS3 Transforms 的浏览器仍然可以看到背景色的变化，不影响可用性，详见 CSS3 Transforms。关于性能问题，请参考 High Performance Animations。快速点击“控件”会因选中效果造成不能切换状态的情况，所以去掉“控件”可以被选中的能力：

input[type="checkbox"]:checked + label,
input[type="checkbox"]:not(:checked) + label {
  (-prefix-)user-select: none;
}

这里的浏览器厂商前缀根据需要替换成相应的，查看简单示例。当然还需要提供聚焦以及禁用等状态的样式，就不在这里重复了。以上所有技术可同时适用于单选框(radio)。

紫雪璇雨
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
精通JS脚本之ExtJS框架.part2.rar
03-02
8.5 显示行号和复选框 8.5.1 显示行号 8.5.2 引用复选框 第9章 表格的高级功能 9.1 表格视图——Ext.grid.GridView 9.2 表格分页 9.2.1 添加表格分页显示工具条 9.2.2 从后台脚本获得分页数据 9.2.3 在表格...
web前端 Antd-Checkbox 多选框纵向排列
吕氏春秋i
08-31 2185
这显然不是我要的效果 但是和功能差不多 都是多选框 现在要决绝的就是把``横向排列``改为``纵向排列`` 有了目标就容易解决了问题了 从这个问题触发 去找答案：
样式化复选框(Styling Checkbox)
农夫山泉
10-13 414
复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般就像下面这样：  选中状态  未选状态 这取决于操作系统和浏览器，有些时候，这种样子并不能满足设计要求，这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式，比如拿到这样一张设计图：  blue.png 在过去，想要通过简单地修改样式达成这种设计效果根本不行，不过，现在借助
使用渐进增强的方式美化复选框样式
weixin_30817749的博客
10-13 245
复选框 Checkbox 是 Web 应用常用控件，随处可见，原生的复选框控件一般就像下面这样： 选中状态 未选状态 这取决于操作系统和浏览器，有些时候，这种样子并不能满足设计要求，这时需要更为精致的复选框样式。以往只有少数浏览器才支持对这类控件应用样式，比如拿到这样一张设计图： blue.png 在过去，想要通过简单地修改样式达成这种设计效果根本不行，不过，现在借助强大的 CSS3...
checkbox对齐排列
Uluoyu的博客
08-05 726
checkbox对齐排列 <span style="width: 120px;display: inline-block"> <lable> <input type="checkbox"/> </lable> </span> 常用的 display 可能的值：
Fastadmin tab列表的按钮
qq_40816144的博客
07-29 6435
一、tab列表的按钮 {field: 'operate', title: __('Operate'), table: table, events: Table.api.events.operate, buttons:[ { name: 'detail',//名称 text: __('Send_coupon'...
精通JS脚本之ExtJS框架.part1.rar
03-02
8.5 显示行号和复选框 8.5.1 显示行号 8.5.2 引用复选框 第9章 表格的高级功能 9.1 表格视图——Ext.grid.GridView 9.2 表格分页 9.2.1 添加表格分页显示工具条 9.2.2 从后台脚本获得分页数据 9.2.3 在表格...
程序天下:JavaScript实例自学手册
07-08
10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框...
《程序天下：JavaScript实例自学手册》光盘源码
02-08
10.7 单击任意单元格都能自动选中复选框 10.8 调用复选框后面的文字 10.9 两个checkbox互斥问题 10.10 使用checkbox控制文本框 10.11 选中表格行前的复选框则行变色 10.12 用JavaScript生成面包屑导航 10.13 复选框...
vuejs怎样将checkbox样式设置为一排展示
mischen520的博客
04-18 998
开始拿到一个页面，页面是这样展示的： 这个展示的太不友好，现在希望将这个弄成一排展示，最后达到这样的效果： 因为前面已经设置了label样式，所以现在只需要根据id进行设置样式就行，之前的代码是这样的： 修改之后的代码为： <style scoped> #add-blog *{ box-sizing: border-box; } #add-blog{ margin: 20px auto; max-width: 600px; paddin
vue中checkbox修改为圆形样式
CC的博客
07-15 9669
有些时候我们需要对checkbox进行样式修改，例如改为圆圈： checkbox代码 <input type="checkbox" class="layers-item-selector" :value="item.name" v-model="value" /> css样式 .layers-item-selector { outline: none; width: 16px; height: 16px; background-color: #ffffff; border
css案例15——复选框样式修改（复选框变为圆角）
努力、拼搏、奋进
06-23 6850
复选框样式修改（复选框变为圆角）
fastadmin 基础
zyh2468的博客
10-27 3487
fastadmin 基础 目录结构 一、fastadmin 类库 1.文字转拼音 2.时间类库 3.分类 目录结构 project 应用部署目录 ├─application 应用目录（可设置） │ ├─common 公共模块目录（可更改） │ ├─index 模块目录(可更改) │ │ ├─config.php 模块配置文件 │ │ ├─common.php 模块函.
你见过吗？9款超炫的复选框（Checkbox）效果
weixin_34124651的博客
04-21 326
　　复选框（Checkbox）在各个浏览器中的效果不一致，因此很多 Web 开发人员会自己重新设计一套界面和使用体验都更佳的复选框功能。下面就给大家分享9款超炫的复选框（Checkbox）效果，纯 CSS3 实现，未使用任何图片。 　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。     　　前面三款效果都是灵感来自...
checkbox 复选框文本和文字对齐
热门推荐
kapang的专栏
08-26 1万+
demo :            显示数值 " />显示   即外面的div和input复选框都要设置样式vertical-align:middle;
element ui 表格 复选框样式串行
最新发布
08-08
在 Element UI 表格中，复选框的样式串行是指复选框在一行中依次排列，每一个复选框占据一定的空间。 要实现复选框样式串行，需要将每个复选框放置在表格中的每一列中。在表格的每一行中，可以通过使用 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值