备案控制台
开发者社区 开发与运维 文章 正文

纯CSS自定义Html中Checkbox复选框样式

2017-11-14 2924
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

首先看下效果：

点击演示地址查看实例。

首先，需要添加一段CSS隐藏所有的Checkbox复选框，之后我们会改变它的外观。

要做到这一点需要添加一段代码到你的CSS文件中。

复制代码 
/**
 * 隐藏默认的checkbox
 */
input[type=checkbox] {
visibility: hidden;
}
复制代码

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

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

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

复制代码 
<section>
  <!-- Checbox One -->
  <h3>Checkbox One</h3>
  <div class="checkboxOne">
  <input type="checkbox" value="1" id="checkboxOneInput" name="" />
     <label for="checkboxOneInput"></label>
  </div>
</section>
复制代码

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

复制代码 
/**
 * Create the slider bar
 */
.checkboxOne {
    width: 40px;
    height: 10px;
    background: #555;
    margin: 20px 80px;
    position: relative;
    border-radius: 3px;
}
复制代码

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

复制代码 
/**
 * 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;
}
复制代码

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

复制代码 
/**
 * Move the slider in the correct position if the checkbox is clicked
 */
.checkboxOne input[type=checkbox]:checked + label {
    left: 27px;
}
复制代码

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

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

复制代码 
<section>
  <!-- Checbox Two -->
  <h3>Checkbox Two</h3>
  <div class="checkboxTwo">
  <input type="checkbox" value="1" id="checkboxTwoInput" name="" />
     <label for="checkboxTwoInput"></label>
  </div>
</section>
复制代码

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

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

复制代码 
/**
 * Create the line for the circle to move across
 */
.checkboxTwo:before {
    content: '';
    position: absolute;
    top: 19px;
    left: 14px;
    height: 2px;
    width: 90px;
    background: #111;
}
复制代码

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

复制代码 
/**
 * 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;
}
复制代码

当选中时改变label的left和background属性。

复制代码 
/**
 * Create the click event for the checkbox
 */
.checkboxTwo input[type=checkbox]:checked + label {
    left: 84px;
    background: #26ca28;
}
复制代码

 

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

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

复制代码 
<section>
  <!-- Checbox Three -->
  <h3>Checkbox Three</h3>
  <div class="checkboxThree">
  <input type="checkbox" value="1" id="checkboxThreeInput" name="" />
     <label for="checkboxThreeInput"></label>
  </div>
</section>
复制代码

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

复制代码 
/**
 * Checkbox Three
 */
.checkboxThree {
    width: 120px;
    height: 40px;
    background: #333;
    margin: 20px 60px;
 
    border-radius: 50px;
    position: relative;
}
复制代码

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

复制代码 
/**
 * 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 text 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
 */
.checkboxThree input[type=checkbox]:checked + label {
    left: 60px;
    background: #26ca28;
}
复制代码

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

复制代码 
<section>
  <!-- Checbox Four -->
  <h3>Checkbox Four</h3>
  <div class="checkboxFour">
  <input type="checkbox" value="1" id="checkboxFourInput" name="" />
     <label for="checkboxFourInput"></label>
  </div>
</section>
复制代码

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

复制代码 
/**
 * 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);
}
复制代码

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

复制代码 
/**
 * 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样式稍微好了些，但是不同的是我们可以根据自己的需要来定义它的样式了。
首先还是一样的HTML代码

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

复制代码 
/**
 * Checkbox Five
 */
.checkboxFive {
    width: 25px;
    margin: 20px 100px;
    position: relative;
}
复制代码

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

复制代码 
/**
 * 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;
}
复制代码

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

复制代码 
/**
 * 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);
}
复制代码

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

复制代码 
/**
 * 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;
}
复制代码

这将会为你创建全新的checkbox复选框样式。



本文转自ZH奶酪博客园博客，原文链接：http://www.cnblogs.com/CheeseZH/p/4580062.html，如需转载请自行联系原作者

文章标签：
前端开发
关键词：
HTML CSS
CSS样式
CSS html
HTML样式
自定义HTML
技术小哥哥
目录
相关文章
疯狂的猿
|
2天前
|
移动开发 HTML5
HTML5/CSS3粒子效果进度条代码
HTML5/CSS3进度条应用。这款进度条插件在播放进度过程中出现粒子效果，就像一些小颗粒从进度条上散落下来
疯狂的猿
13 0
HTML5/CSS3粒子效果进度条代码
风与烈酒
|
3天前
|
前端开发
css设置内嵌样式阴影
css设置内嵌样式阴影
风与烈酒
8 0
风与烈酒
|
3天前
|
前端开发
css样式实现一个滑动按钮
css样式实现一个滑动按钮
风与烈酒
6 0
龙大吉
|
4天前
|
前端开发 UED
CSS 支持伪类和伪元素，可用于指定文档中不同状态的样式
CSS 提供关键帧和过渡动画两种方式创建动态效果。关键帧动画通过定义一系列样式的关键帧，浏览器自动插入过渡帧形成动画，如示例中背景颜色变化的循环。过渡动画则在属性改变时（如鼠标悬停）触发，展示平滑转换，如 div 元素尺寸变化。通过调整帧时间、顺序和样式，可实现更复杂的动画，增强网站交互体验。
龙大吉
23 4
算精通
|
5天前
|
移动开发 前端开发 JavaScript
：掌握移动端开发：HTML5 与 CSS3 的高效实践
：掌握移动端开发：HTML5 与 CSS3 的高效实践
算精通
22 1
桃李春风一杯酒
|
11天前
|
缓存 移动开发 前端开发
【专栏：HTML与CSS前端技术趋势篇】HTML与CSS在PWA（Progressive Web Apps）中的应用
【4月更文挑战第30天】PWA（Progressive Web Apps）结合现代Web技术，提供接近原生应用的体验。HTML在PWA中构建页面结构和内容，响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作，保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步，HTML与CSS在PWA中的应用将更广泛。
桃李春风一杯酒
34 10
桃李春风一杯酒
|
11天前
|
前端开发 JavaScript 开发者
【专栏：HTML与CSS前端技术趋势篇】前端框架（React/Vue/Angular）与HTML/CSS的结合使用
【4月更文挑战第30天】前端框架React、Vue和Angular助力UI开发，通过组件化、状态管理和虚拟DOM提升效率。这些框架与HTML/CSS结合，使用模板语法、样式管理及组件化思想。未来趋势包括框架简化、Web组件标准采用和CSS在框架中角色的演变。开发者需紧跟技术发展，掌握新工具，提升开发效能。
桃李春风一杯酒
38 11
桃李春风一杯酒
|
11天前
|
前端开发 JavaScript UED
【专栏：HTML 与 CSS 前端技术趋势篇】Web 性能优化：CSS 与 HTML 的未来趋势
【4月更文挑战第30天】本文探讨了CSS和HTML在Web性能优化中的关键作用，包括样式表压缩、选择器优化、DOM操作减少等策略。随着未来趋势发展，CSS模块系统、自定义属性和响应式设计将得到强化，HTML新特性也将支持复杂组件构建。同时，应对浏览器兼容性、代码复杂度和性能功能平衡的挑战是优化过程中的重要任务。通过案例分析和持续创新，我们可以提升Web应用性能，创造更好的用户体验。
桃李春风一杯酒
27 6
桃李春风一杯酒
|
11天前
|
移动开发 前端开发 UED
【专栏：HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始，逐步增加高级特性，保证所有用户能访问基本内容；而优雅降级则是从完整版本出发，向下兼容，确保低版本浏览器仍能使用基本功能。实践中，遵循HTML5/CSS3规范，使用流式布局和响应式设计，检测浏览器特性，并提供备选方案，都是实现这两种策略的有效方法。选择合适策略优化网站，提升用户体验。
桃李春风一杯酒
29 4
天隆金
CSS3自定义checkbox复选框
在线演示 本地下载
天隆金
752 0

热门文章

最新文章

  • 1
    【CSS进阶】使用CSS gradient制作绚丽渐变纹理背景效果（下）
  • 2
    《手把手教你》系列技巧篇（十八）-java+ selenium自动化测试-元素定位大法之By css中卷（详细教程）
  • 3
    《手把手教你》系列技巧篇（十七）-java+ selenium自动化测试-元素定位大法之By css上卷（详细教程）
  • 4
    前端代码整洁与规范之CSS篇
  • 5
    《手把手教你》系列技巧篇（十九）-java+ selenium自动化测试-元素定位大法之By css下卷（详细教程）
  • 6
    Tailwind CSS如何在vue项目中使用
  • 7
    【掰开揉碎】详解 CSS3 Grid 布局
  • 8
    解密CSS单位：px、em、vh的区别与应用
  • 9
    CSS 中BFC是什么？
  • 10
    css用法 :is()、:where()和:has()的用法
  • 1
    请描述如何使用`BeautifulSoup`或其他类似的库来解析 HTML 或 XML 数据。
    28
  • 2
    自适应窗口图片轮播HTML代码
    21
  • 3
    前端框架演进史：从HTML到现代化开发
    42
  • 4
    如何在HTML中添加图像链接
    35
  • 5
    如何在HTML文件中添加超链接
    25
  • 6
    HTML玩转超链接a标签
    31
  • 7
    PHP爬虫技术：利用simple_html_dom库分析汽车之家电动车参数
    30
  • 8
    打造个性化的个人网页：从HTML到个人品牌
    23
  • 9
    15.HTML5视频播放器制作教程
    52
  • 10
    12.使用HTML制作交互图片
    40

    • 相关课程

    更多
  • CSS 快速掌握
  • HTML 入门与实战
  • HTML基础入门学习
  • HTML5 新特性教程
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 天猫 HTML5 互动技术实践
  • 天猫HTML5互动技术实践

    • 相关实验场景

    更多
  • HTML及前端框架
  • CSS基础教程
  • Html5和Webpack2：Webpack5打包JS和样式表
  • Html5和Webpack1：Webpack5打包工具介绍
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）