css自定义checkbox

最新推荐文章于 2022-12-09 16:54:08 发布
最新推荐文章于 2022-12-09 16:54:08 发布
阅读量269 收藏
点赞数
分类专栏： 代码库 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37547772/article/details/78141653
版权
效果展示：

代码：
<body>
<label for="mybtn">
<input id="mybtn" class="mybtn" type="checkbox"><b></b>全选</input>
</label>
<body>
<style>
/自定义样式的checkbox/
label {
display: block;
height:100% !important;
padding:0 !important;
margin:3px!important;
}
/旧按钮处理/
input {
visibility: hidden; /隐藏掉默认样式的checkbox,但仍然保留占有空间 /
display: none; /隐藏并销毁占有空间/
}
/新按钮样式/
b{
cursor:pointer;
display:inline-block; /行内显示，并且可以撑起空间/
width:20px;height:20px; /大小/
border: solid 1px #ccc !important; /边框样式/
border-radius:10px; /圆角/

vertical-align:middle; /*水平居中*/
margin:5px;
}
/制作对号 /
b:after{
opacity:0; /透明度 /
content:'';
position:absolute;
width:13px;height:7px; /大小/
background:transparent; /方块填充色/
top:24px;left:12px; /定位/
border:2px solid white; /边框效果/
border-top:none;border-right:none; /生成对号/
transform:rotate(-45deg) scale(0); /* 旋转缩放 /
transition: all 0.3s; /动画延时/
}
/新按钮点击时样式/
input:checked+b{
background-color:rgb(76, 216, 100);
}
/点击时对号效果*/
input:checked+b:after{
transform:rotate(-45deg) scale(1);
opacity:1;
}
</style>
参考原文：http://www.360doc.com/content/15/0528/11/1355383_473823407.shtml
筱爻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯CSS自定义checkbox对号
Quiet-Night的博客
10-21 1万+
CSS 自定义checkbox
CSS3设置checkbox的样式
Elson_tju的博客
04-21 2144
一般在网上都能看到各式各样的二选一“按钮”组件，轻松惬意的滑动，朴实快速的效果往往给人以美感，那么这些是怎么实现的呢？ 那么lz接下来就一步步讲述自学过程； No.1 先实现再理解 我的习惯是，拿到一个需求，首先理解它，是否能拿到成品，然后再一步步往下理解它，最后完全理解（方法因人而异） checkbox样式参考网站 http://uploads.xiumu.org/2014/0
纯CSS 自定义radio单选按扭、checkbox复选框 默认样式
weixin_39475476的博客
12-09 720
css 中radio和checkbox 样式
【前端随记01】纯css自定义checkbox复选框样式
Sabrina_cc的博客
08-17 1万+
人生何其短，要笑得分外甜 公司的H5项目又让我重新捡回来HTML5和原生JS和Jquery,今日遇到了checkbox的样式问题，做一个小小记录。 直接使用HTML5中的input复选框checkbox的样式是这样滴（左）但是嘞，UI设计稿是这样滴（右）： <input class="sure" type="checkbox" name="" value=""> 因此，我们需要动脑筋修改checkbox的样式了。 1.首先，需要添加一段CSS隐藏所有的Checkbox复...
利用伪类:after改变checkbox样式
qq_41585377的博客
05-31 1044
`` 今天我们UI发了一张设计图，里面CheckBox长这样，然后我开始敲的时候发现不管我怎么改check样式都不能改变check的默认样式，后面去网上百度了一下，好多都说用伪类就可以改变，我一想，伪类可以改变他自身？一进去看代码，发现是通过伪类来重新创一个checkbox样式然后通过定位把原来的样式给遮挡住，就实现了改变checkbox的样式。下面附上我实现这个功能的代码供大家参考。 /* 修改...
CSS效果：这里有你想要的CSS3漂亮的自定义Checkbox各种复选框
qq_36320160的博客
09-30 763
在原来有一篇文章写到了《CSS效果篇--纯CSS+HTML实现checkbox的思路与实例》。 今天这篇文章主要写各种自定义的checkbox复选框，实现如图所示的复选框： 大致的html代码都如下所...
html更改checkbox样式,html自定义checkbox样式
weixin_34366539的博客
07-15 2565
1.原理就是将浏览器原生checkbox隐藏，对label进行相关操作。因为label和checkbox时绑在一起的，所以点击label就会选中2.实现效果图片.png3.代码提供一种图片.png1.html代码原生的checkbox和对应的label，注意lable的for要与checkbox的id对应markcheckbox12.css代码1)将原生的checkbox隐藏input[type=...
利用纯CSS自定义Checkbox和Radio的样式示例代码
09-27
总的来说，自定义Checkbox和Radio样式是提高网页用户体验的一种方法。通过CSS3，我们可以创建一致且美观的表单元素，增强网站的整体设计感。在实践中，应结合实际情况考虑兼容性问题，以确保所有用户都能顺利使用。
CSS+HTML自定义checkbox效果的实例代码
09-24
首先，CSS自定义checkbox的基本思路是利用`label`标签的关联功能。`<label>`标签的`for`属性可以与`<input type="checkbox">`的`id`属性相对应，使得用户可以通过点击`label`来触发`checkbox`的状态变化，而无需直接...
CSS3漂亮的自定义Checkbox复选框 9款迷人样式
08-23
之前我们分享过一款非常不错的CSS3自定义checkbox复选框纯CSS3美化Checkbox和Radiobox按钮，外观非常时尚。今天我们来分享一款9款样式迷人的CSS3漂亮的自定义checkbox复选框。这几款复选框样式很丰富，使用起来也比较方便。
CSS3实现自定义Checkbox特效实例代码
09-24
主要给大家介绍了利用CSS3实现自定义Checkbox特效的相关资料，文中给出了完整的实例代码供大家参考学习，相信对大家学习自定义Checkbox样式具有一定的参考价值，感兴趣的朋友们下面来一起看看吧。
css的checkbox样式,css自定义checkbox样式的方法总结
weixin_32386693的博客
08-04 3920
在我们日常的开发工作中，html的开发是不可少的，那么CheckBox是在HTML中让使用者与首页上的素材发生交互作用的一种方法。其中包含CheckBox控件就是我们一般所说的复选框，通常用于某选项的打开或关闭，那么今天就给大家介绍css自定义checkbox样式的方法总结！css自定义checkbox样式1.使用CSS自定义radio、checkbox样式的示例详解以前做自定义样式的radio,...
CSS实现自定义CheckBox
灵神翁的博客
09-04 764
大家好，我是梦辛工作室的灵，想原生的checkbox是真心的不太好看，所以我们还得费劲心思去修改它的样式，下面是我写的一个样式，提供给大家参考，一如既往先看效果： 下面是实现代码： CSS .custom_checkbox .checkboxcss { cursor: pointer; position: absolute; width: 15px; height: 15px; top: 0; left: 0; background: #f7f7f7
CSS自定义checkbox样式
总结，交流，记录，成长
09-03 896
[type=checkbox]是过滤的意思，意思是说如果遇到type=checkbox的，就执行以下的样式。 input[type=checkbox], input[type=radio]{ -webkit-appearance: none; appearance: none; width: 13px; height: 13px; margin: 0; cursor: pointe...
自定义复选框checkbox样式 纯css+js
baidu_20876831的博客
06-11 8388
复选框作为网页中比较常见的一个组件，有的时候我们需要对它进行美化，但是我们无法直接为其定义样式，所以我们需要一些其它的办法。表单元素中有label 元素和 for属性，当我们点击label 标签时，对应的表单元素就会有所反应。我们就是依据这个特性来实现的。html:&lt;body&gt; &lt;input type="checkbox" id="myCheck"&gt; &lt...
自定义复选框checkbox样式
热门推荐
justforuse的博客
07-31 4万+
复选框作为网页中比较常见的一个组件，有的时候我们需要对它进行美化，但是我们无法直接为其定义样式，所以我们需要一些其它的办法。表单元素中有label 元素和 for属性，当我们点击label 标签时，对应的表单元素就会有所反应。我们就是依据这个特性来实现的。html:<body> <input type="checkbox" id="myCheck"> <label for="myCh
CSS3实现checkbox和radio自定义样式
朽然的博客
05-15 5776
我们知道浏览器自带的checkbox复选框和radio单选框不怎么美观，而且在不同的浏览器上显示的样式又有很大的差异，由于目前越来越多的人开始接受支持CSS3的现代浏览器，所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式。
自定义checkbox样式
最新发布
05-18
在这个例子中，我们使用了一个隐藏的原始 checkbox，并创建了一个自定义的样式。当 checkbox 被选中时，我们使用 CSS 选择器 `:checked` 来改变它的样式。我们还对 checkbox 所在的标签进行了样式定义，以使它们更加...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值