通过css3实现checkbox选择样式

最新推荐文章于 2024-05-07 09:22:09 发布
最新推荐文章于 2024-05-07 09:22:09 发布
阅读量3.2k 收藏 1
点赞数
分类专栏： 其它
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhong242526/article/details/89669345
版权

1.html结构

<div class='checkbox'>
    <input type='checkbox' id='checkbox1' name='checkboox[]'>
    <label for='checkbox1'>篮球</label>
</div>

2.

.checkbox {
    position: relative;
    height: 30px;
}
.checkbox input[type='checkbox'] {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
}
.checkbox label {
    position: absolute;
    left: 30px;
    top: 0;
    height: 20px;
    line-height: 20px;
}
.checkbox label:before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
.checkbox label:after {
    content: '';
    position: absolute;
    left: -22px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: 0;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}
.checkbox input[type='checkbox']:checked + label:before {
    background: #4cd764;
    border-color: #4cd764;
}
.checkbox input[type='checkbox']:checked + label:after {
    background: #4cd764;
}

完整案例

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Examples</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport"/>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="" rel="stylesheet">
</head>
<style>

.checkbox {
    position: relative;
    height: 30px;
}
.checkbox input[type='checkbox'] {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    opacity: 0;
}
.checkbox label {
    position: absolute;
    left: 30px;
    top: 0;
    height: 20px;
    line-height: 20px;
}
.checkbox label:before {
    content: '';
    position: absolute;
    left: -30px;
    top: 0;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    border-radius: 50%;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.checkbox label:after {
    content: '';
    position: absolute;
    left: -22px;
    top: 3px;
    width: 6px;
    height: 12px;
    border: 0;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    background: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
}

.checkbox input[type='checkbox']:checked + label:before {
    background: #4cd764;
    border-color: #4cd764;
}
.checkbox input[type='checkbox']:checked + label:after {
    background: #4cd764;
}
</style>
<body>
<div class='checkbox'>
    <input type='checkbox' id='checkbox1' name='checkboox[]'>
    <label for='checkbox1'>篮球</label>
</div>
<div class='checkbox'>
    <input type='checkbox' id='checkbox2' name='checkboox[]'>
    <label for='checkbox2'>乒乓球</label>
</div>
<div class='checkbox'>
    <input type='checkbox' id='checkbox3' name='checkboox[]' checked>
    <label for='checkbox3'>足球</label>
</div>

</body>
</html>

参考

zhong242526
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS3实现自定义Checkbox动画特效代码
03-20
本教程将聚焦于如何利用CSS3实现自定义Checkbox动画特效，让网页元素更具交互性和吸引力。 首先，让我们理解Checkbox的基本概念。Checkbox是HTML中的一种表单元素，用于让用户在一组选项中选择多个选项。默认情况下...
CSS3实现checkbox和radio自定义样式
朽然的博客
05-15 5776
我们知道浏览器自带的checkbox复选框和radio单选框不怎么美观，而且在不同的浏览器上显示的样式又有很大的差异，由于目前越来越多的人开始接受支持CSS3的现代浏览器，所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式。
纯CSS设置Checkbox复选框控件的样式
qq_27009517的博客
08-12 6033
下面是纯CSS设置Checkbox复选框控件的五种简单样式，有兴趣的可以进行改动将其变成自己想要的样式。 首先，需要添加一段CSS隐藏所有的Checkbox复选框，下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS文件中。 隐藏掉所有的Checkbox复选框后，我们需要添加一个label HTML元素，我们都知道，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着，我们可以通过label的点击事件来处理我们的Checkbox复选框。 样式一
【前端随记01】纯css自定义checkbox复选框样式
最新发布
2401_84097774的博客
05-07 590
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
使用css修改checkbox选择框的样式
weixin_33805992的博客
08-22 1293
二. 修改思路： 给原本的checkbox框加上visibility: hidden;属性，使其隐藏同时又占据原本在页面上面的位置，说直白点就是，使checkbox看不见，但是仍然占有原来的位置。 然后使用绝对定位label标签覆盖到checkbox框上面，通过修改label标签达到修改checkbox框的...
【前端随记01】纯css自定义checkbox复选框样式，看这一篇就够了
weixin_57992300的博客
03-20 1062
由于，当点击的有for属性的label标签时，对应的Checkbox复选框会被选中。这意味着可以通过label的点击事件来处理我们的Checkbox复选框。因此，一个label不足以完成任务，我们用一个DIV元素包含checkbox，我们需要使用它们来做样式。1. 首先，需要添加一段CSS隐藏所有的Checkbox复选框。(img-vvd3YPOO-1710902663903)]3. label标签用于Click事件和我们要定义的复选框的方框样式。因此，我们需要动脑筋修改checkbox的样式了。
使用css修改input框中checkbox的样式
qq_27009517的博客
08-11 5686
概述 在页面设计时，我们经常使用input复选框。由于界面设计的需要，我们需要修改复选框的样式，使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂，通常修改的方式有两种，一个是链入图片，另一个是使用纯css的方法进行修改。链入图片的设计方式比较简单，但是需要预先设计或者下载图片，比较麻烦。纯css的方法，只需要在css文件中编写代码，个人觉得比较方便，因此，本文使用该方式对input中的CheckBox进行设置。 实现效果 本文在设计时，希望达到以下效果，如图所示，每...
CSS3实现自定义Checkbox动画.zip
07-03
本示例"CSS3实现自定义Checkbox动画"正是利用了CSS3的强大功能，来创建一种独特且具有动画效果的复选框（Checkbox）样式。 复选框是网页表单中常用的一种交互元素，通常用于让用户选择多个选项。在HTML中，复选框由...
CSS3渲染Checkbox实现3D开关切换按钮
08-02
利用checkbox结合CSS3来实现一个3D开关切换按钮，该CSS3按钮一共有4款不同的样式风格，有电器开关样式按钮、iPhone锁屏样式按钮等。该CSS3按钮的实现原理很简单，原型是一个checkbox，然后利用CSS3属性来渲染...
CSS3实现自定义Checkbox特效实例代码
09-24
主要给大家介绍了利用CSS3实现自定义Checkbox特效的相关资料，文中给出了完整的实例代码供大家参考学习，相信对大家学习自定义Checkbox样式具有一定的参考价值，感兴趣的朋友们下面来一起看看吧。
纯CSS设置Checkbox复选框控件的样式(五种方法)
09-24
下面是纯CSS设置Checkbox复选框控件的五种简单样式，有兴趣的可以进行改动将其变成自己想要的样式
css的checkbox样式,css自定义checkbox样式的方法总结
weixin_32386693的博客
08-04 3921
在我们日常的开发工作中，html的开发是不可少的，那么CheckBox是在HTML中让使用者与首页上的素材发生交互作用的一种方法。其中包含CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭，那么今天就给大家介绍css自定义checkbox样式的方法总结！css自定义checkbox样式1.使用CSS自定义radio、checkbox样式的示例详解以前做自定义样式的radio,...
利用伪类:after改变checkbox样式
qq_41585377的博客
05-31 1044
`` 今天我们UI发了一张设计图，里面CheckBox长这样，然后我开始敲的时候发现不管我怎么改check样式都不能改变check的默认样式，后面去网上百度了一下，好多都说用伪类就可以改变，我一想，伪类可以改变他自身？一进去看代码，发现是通过伪类来重新创一个checkbox样式然后通过定位把原来的样式给遮挡住，就实现了改变checkbox的样式。下面附上我实现这个功能的代码供大家参考。 /* 修改...
css自定义checkBox的样式
jdhrucn的博客
01-02 595
2.我搜了一下发现，用css来直接处理input标签只能进行简单的设置，比如改变框的大小。像那些背景颜色之类的是改变不了的。这就需要我们换个思路了，我们可以自己用容器自己写一个复选框样式，然后和checkbox进行脚本的绑定。这里的容器我们可以使用label标签，在用label的for属性和checkbox进行绑定。在把一开始的checkbox给隐藏起来，就可以实现自定义checkbox。1.最近在写项目的时候碰到要对checkbox的复选框的样式进行修改。想要什么样的样式，可以修改对应的css代码。
CSS3特效-自定义checkbox样式
tian_tian_gong的博客
01-25 1595
前言: 在实际开发过程中，大多数时候都不会用原生的checkbox样式，因为太丑了， 如果我们不用任何ui库的话， 就要手动写一个了， 原理就是将默认的checkbox 的input标签隐藏掉， 然后在与其一套的label标签前/后加一个checkbox的图标(可以是图片，也可以使svg，这里我们用的svg). 效果图: 代码: //css .checkbox{ displa...
css修改input框默认样式（checkbox）
zhudingfengshen的博客
05-29 3492
项目场景： 可以看到这是checbox，底图为默认样式，但是是单选框的逻辑，开始打算用radio实现样式修改不过遇到了很多困难，还是选择了checkbox实现单选逻辑 解决方案： 替换内部对号为icon及修改内部填充色等 input[type="checkbox"]::before { content: ""; position: absolute; top: 0; left: 0; background: #fff; /* 未选中时的背景颜色 */ width: 100
css修改checkbox样式
低调哥的博客
01-26 1550
checkbox样式美化，纯css 方法1、label for input的id，可以实现点击label,使input选中或者取消选中的效果。要绑定id html type="checkbox"class="input_check" id="check3"> for="check3"> type="checkbox"class="input_check"
css修改原生checkbox的默认样式
会点php的前端小渣渣
01-30 586
不使用lable标签，直接上代码。
css 改变checkbox样式
06-02
可以通过以下步骤改变 checkbox 的样式： 1. 隐藏原生的 checkbox： ```css input[type="checkbox"] { display: none; } ``` ...2. 创建自定义的 checkbox 样式： ...这样就可以通过 CSS 改变 checkbox 的样式了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值