高考报名时间2022年11月1日还剩 天 距离2023年6月7日高考还有 天
栏目分类:
子分类:
返回
名师互学网用户登录
名师互学网
快速导航关闭
当前搜索
当前分类
前沿技术 软件开发 系统运维 产品运营 生活办公 面试经验 考试题库
子分类
人工智能 大数据 云计算 区块链 物联网 深度学习 机器学习 NLP 计算机视觉 语音识别 其他 大数据系统 数据可视化 数据挖掘与分析 其他 Docker/k8s 虚拟化 云平台 其他 基本原理 数字货币 智能合约 EOS应用 其他 通讯技术 嵌入式开发 单片机 物联网应用 HarmonyOS 其他 后端开发 Web开发 移动开发 游戏开发 Python Java 架构设计 C/C++/C# PHP .Net Go语言 R语言
实用工具
学习工具 小学数学练习 字帖生成 在线画板 函数绘制 拼音字母表 在线词典 黄历查询 亲戚关系计算 安全期计算 中国历史 Excel函数 模拟请求 json格式化 浏览器指纹
热门搜索
路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

一波CSS的Checkbox复选框样式代码分享

CSS教程 更新时间： 发布时间： IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Checkbox复选框是一个可能每一个网站都在使用的HTML元素，但大多数人并不给它们设置样式，所以在绝大多数网站它们看起来是一样的。为什么不把你的网站中的Checkbox设置一个与众不同的样式，甚至可以让它看起来一点也不像复选框。

在本教程中，我们将创建5个不同的选择框，你可以在你的网站上使用它。
20151116113259142.png (600×73)

查看演示，可以看到我们将要创建的复选框样式。
演示地址

首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。

CSS Code复制内容到剪贴板
  1.   
  2. input[type=checkbox] {   
  3.  visibility: hidden;   
  4. }  

隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。

样式一
20151116113348756.png (231×121)

此复选框风格就像一个解锁滑块，滑块选中和未选中状态会显示在的不同位置。当单击滑块按钮（label标签），将会选中复选框，然后滑块移动到ON位置。

我们开始创建复选框区的HTML。

XML/HTML Code复制内容到剪贴板
  1.   
  2.     
  3.   

    Checkbox One

      
  4.      
  5.       
  6.       
  7.    
  
  •   

    • 因为这个样式的复选框，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做黑色条带和圆角。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxOne {   
    3.  width: 40px;   
    4.  height: 10px;   
    5.  background: #555;   
    6.  margin: 20px 80px;   
    7.  position: relative;   
    8.  border-radius: 3px;   
    9. }  

    现在，我们可以把label作为条带上的滑块，我们希望按钮效果是从条带的一侧移动到另一侧，我们可以添加label的过渡。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxOne label {   
    3.  display: block;   
    4.  width: 16px;   
    5.  height: 16px;   
    6.  border-radius: 50%;   
    7.     
    8.  -webkit-transition: all .5s ease;   
    9.  -moz-transition: all .5s ease;   
    10.  -o-transition: all .5s ease;   
    11.  -ms-transition: all .5s ease;   
    12.  transition: all .5s ease;   
    13.  cursor: pointer;   
    14.  position: absolute;   
    15.  top: -3px;   
    16.  left: -3px;   
    17.     
    18.  background: #ccc;   
    19. }  

    现在这个滑块在选中（关闭）位置，当我们选中复选框，我们希望有一个反应发生，所以我们可以移动滑块到另一端。我们需要知道，判断复选框被选中，如果是则改变label元素的left属性。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxOne input[type=checkbox]:checked + label {   
    3.  left: 27px;   
    4. }  

    这就是你需要的第一个Checkbox复选框的CSS。

    样式二
    20151116113455427.png (236×127)

    此复选框风格像样式一样，但不同的是，这个滑块按钮会改变颜色。当您单击滑块按钮，它移动到条带的另一边，并改变按钮的颜色。

    HTML代码和样式一是完全一样的。

    XML/HTML Code复制内容到剪贴板
    1.   
    2.     
    3.   

      Checkbox Two

        
    4.      
    5.       
    6.       
    7.    
      
  •   

    • 这个DIV会变成比样式一大一些的条带，label依然是作为滑块，使用下面的CSS来定义它。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxTwo {   
    3.  width: 120px;   
    4.  height: 40px;   
    5.  background: #333;   
    6.  margin: 20px 60px;   
    7.     
    8.  border-radius: 50px;   
    9.  position: relative;   
    10. }  

    这个样式中间有一个黑色的条，滑块会沿着它左右滑动，但是DIV元素已经使用了，所以我们需要用:before伪类创建一个新的元素。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxTwo:before {   
    3.  content: '';   
    4.  position: absolute;   
    5.  top: 19px;   
    6.  left: 14px;   
    7.  height: 2px;   
    8.  width: 90px;   
    9.  background: #111;   
    10. }  

    和样式一一样，接下来我们为label写CSS样式，把它用作滑块。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxTwo label {   
    3.  display: block;   
    4.  width: 22px;   
    5.  height: 22px;   
    6.  border-radius: 50%;   
    7.     
    8.  -webkit-transition: all .5s ease;   
    9.  -moz-transition: all .5s ease;   
    10.  -o-transition: all .5s ease;   
    11.  -ms-transition: all .5s ease;   
    12.  transition: all .5s ease;   
    13.  cursor: pointer;   
    14.  position: absolute;   
    15.  top: 9px;   
    16.  z-index: 1;   
    17.  left: 12px;   
    18.  background: #ddd;   
    19. }  

    我要实现和样式一差不多的选中状态，当选中时改变label的left和background属性。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxTwo input[type=checkbox]:checked + label {   
    3.  left: 84px;   
    4.  background: #26ca28;   
    5. }  

    样式三
    20151116113623446.png (264×126)

    这个复选框的样式比样式二更复杂一些，它和前面的例子一样会左右滑动，并且当改变选中和未选中的状态时，滑块滑动到另一侧并且在原位置显示对应的文本。

    首先，我们写HTML代码，这和前面是相同的。

    XML/HTML Code复制内容到剪贴板
    1.   
    2.     
    3.   

      Checkbox Three

        
    4.      
    5.       
    6.       
    7.    
      
  •   

    • 然后，我们用相同的方式把div作为滑块，下面的代码会创建一个黑色圆角的条带，我们可以把滑块和文本放到里面。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxThree {   
    3.  width: 120px;   
    4.  height: 40px;   
    5.  background: #333;   
    6.  margin: 20px 60px;   
    7.     
    8.  border-radius: 50px;   
    9.  position: relative;   
    10. }  

    当滑块处于未选中状态时，滑块会在左侧，并且右边显示”OFF”，当点击的时候，滑块移动到右侧，左侧显示”ON”。
    但是元素数量不足以让我们实现这些功能，所以我们要用:before和:after两个伪类创建两个元素，分别放置”ON”和”OFF”。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxThree:before {   
    3.  content: 'On';   
    4.  position: absolute;   
    5.  top: 12px;   
    6.  left: 13px;   
    7.  height: 2px;   
    8.  color: #26ca28;   
    9.  font-size: 16px;   
    10. }   
    11.   
    12. .checkboxThree:after {   
    13.  content: 'Off';   
    14.  position: absolute;   
    15.  top: 12px;   
    16.  left: 84px;   
    17.  height: 2px;   
    18.  color: #ddd;   
    19.  font-size: 16px;   
    20. }  

    和前面一样，我们来添加滑块的样式，当被点击时它会移动到另一侧，并且改变颜色。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxThree label {   
    3.  display: block;   
    4.  width: 52px;   
    5.  height: 22px;   
    6.  border-radius: 50px;   
    7.     
    8.  -webkit-transition: all .5s ease;   
    9.  -moz-transition: all .5s ease;   
    10.  -o-transition: all .5s ease;   
    11.  -ms-transition: all .5s ease;   
    12.  transition: all .5s ease;   
    13.  cursor: pointer;   
    14.  position: absolute;   
    15.  top: 9px;   
    16.  z-index: 1;   
    17.  left: 12px;   
    18.  background: #ddd;   
    19. }   
    20.     
    21.   
    22. .checkboxThree input[type=checkbox]:checked + label {   
    23.  left: 60px;   
    24.  background: #26ca28;   
    25. }  

    样式四
    20151116113733887.png (249×125)

    在这个样式中，我们会创建两个圆形，当点击时改变里面的圆形的颜色表示选中与未选中的状态。
    和前面一样的HTML代码。

    XML/HTML Code复制内容到剪贴板
    1.   
    2.     
    3.   

      Checkbox Four

        
    4.      
    5.       
    6.       
    7.    
      
  •   

    • 接下来我们要为checkbox创建外面的圆形，使用CSS的border-radius属性，并且设置为100%就可以创建一个正圆形。

    CSS Code复制内容到剪贴板
    1.   
    2.      
    3.   Checkbox Four   
    4.    "checkboxFour">   
    5.        
    6.        
    7.       
    8.   

    然后我们用label元素来创建一个小一点的圆形，它会根据checkbox状态来改变颜色。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxFour label {   
    3.  display: block;   
    4.  width: 30px;   
    5.  height: 30px;   
    6.  border-radius: 100px;   
    7.     
    8.  -webkit-transition: all .5s ease;   
    9.  -moz-transition: all .5s ease;   
    10.  -o-transition: all .5s ease;   
    11.  -ms-transition: all .5s ease;   
    12.  transition: all .5s ease;   
    13.  cursor: pointer;   
    14.  position: absolute;   
    15.  top: 5px;   
    16.  left: 5px;   
    17.  z-index: 1;   
    18.     
    19.  background: #333;   
    20.     
    21.  -webkit-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);   
    22.  -moz-box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);   
    23.  box-shadow:inset 0px 1px 3px rgba(0,0,0,0.5);   
    24. }  

    当复选框被选中的时候，我们要改变内圈的背景颜色来表示选中状态。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxFour input[type=checkbox]:checked + label {   
    3.  background: #26ca28;   
    4. }  

    样式五
    20151116113832981.png (239×109)

    这个复选框的样式有些不同，它看起来只是比浏览器默认的checkbox样式稍微好了些，但是不同的是我们可以根据自己的需要来定义它的样式了。
    首先还是一样的HTML代码

    XML/HTML Code复制内容到剪贴板
    1.   
    2.     
    3.   

      Checkbox Five

        
    4.      
    5.       
    6.       
    7.      
    8.   

    在前面的例子中，我们把div作为checkbox的滑动条带或者外部的圆圈，但是这一次我们不需要了，可以使用div元素来设置复选框的区域。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxFive {   
    3.  width: 25px;   
    4.  margin: 20px 100px;   
    5.  position: relative;   
    6. }  

    label标签用于Click事件和我们要定义的复选框的方框样式。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxFive label {   
    3.  cursor: pointer;   
    4.  position: absolute;   
    5.  width: 25px;   
    6.  height: 25px;   
    7.  top: 0;   
    8.    left: 0;   
    9.  background: #eee;   
    10.  border:1px solid #ddd;   
    11. }  

    接下来，我们要创建方框中的对勾，对于这一点，我们可以使用:after伪类创建一个新的元素，为了实现这个样式，我们可以创建一个5px x 9px的长方形并给他加上边框。这时候我们去掉上面和右边的边框之后，它会看起来像一个字母L。然后我们可以使用CSS的transform属性让它旋转一下，这样看起来就像是一个对勾。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxFive label:after {   
    3.  opacity: 0.2;   
    4.  content: '';   
    5.  position: absolute;   
    6.  width: 9px;   
    7.  height: 5px;   
    8.  background: transparent;   
    9.  top: 6px;   
    10.  left: 7px;   
    11.  border: 3px solid #333;   
    12.  border-top: none;   
    13.  border-right: none;   
    14.     
    15.  -webkit-transform: rotate(-45deg);   
    16.  -moz-transform: rotate(-45deg);   
    17.  -o-transform: rotate(-45deg);   
    18.  -ms-transform: rotate(-45deg);   
    19.  transform: rotate(-45deg);   
    20. }  

    在上面的CSS中，我们已经设置它的透明度为0.2，所以你会看到的复选框有一个半透明的对勾。你可以在悬停的时候加深一点，在选中时，可以把设置为不透明。

    CSS Code复制内容到剪贴板
    1.   
    2. .checkboxFive label:hover::after {   
    3.  opacity: 0.5;   
    4. }   
    5.     
    6.   
    7. .checkboxFive input[type=checkbox]:checked + label:after {   
    8.  opacity: 1;   
    9. }  
    转载请注明：文章转载自 www.mshxw.com
    本文地址：https://www.mshxw.com/it/216144.html

    CSS教程相关栏目本月热门文章

    热门相关搜索
    路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名 中央民族大学排名 北京舞蹈学院排名 北京电影学院排名 中国戏曲学院排名 河北政法职业学院排名 河北经贸大学排名 天津中德应用技术大学排名 天津医学高等专科学校排名 天津美术学院排名 天津音乐学院排名 天津工业大学排名 北京工业大学耿丹学院排名 北京警察学院排名 天津科技大学排名 北京邮电大学(宏福校区)排名 北京网络职业学院排名 北京大学医学部排名 河北科技大学排名 河北地质大学排名 河北体育学院排名
    学习工具
    代数计算器
    三角函数
    解析几何
    立体几何
    知识解答
    教育知识
    百科知识
    生活知识
    常识知识
    写作必备
    作文大全
    作文素材
    句子大全
    实用范文
    关于我们
    关于我们
    联系我们
    网站地图
    交流群

    名师互学网交流群

    名师互学网客服

    名师互学网客服

    名师互学网 版权所有 (c)2021-2022 ICP备案号：晋ICP备2021003244-6号

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号：晋ICP备2021003244-6号