css实现接地气的checkbox框

1.前言
我做的项目中，很少默认用原生的样式，甚至连下拉框都很少用select框，不过，原生也有原生的好处，来得快，没有什么大问题。如果是自己用html+css去拼接的话，样式会好看一点。不过应人而异了。我还是比较喜欢去拼接一些。那今天就教大家如何在自己的项目中做接地气的checkbox框呢？
2.详情
1.css样式

body{font-family:'微软简行楷'}
ul li{list-style:none; margin:10px;color:#4985d7;}
.myCheck { display: none;  }
.myCheck + label { background-color: white;  border: 1px solid #d3d3d3;  width: 20px; height: 20px;  display: inline-block;  text-align: center; vertical-align: middle;  line-height: 20px; margin-right: 5px; }
.myCheck:checked + label {  background-color: #eee; }
.myCheck:checked + label:after {  content: "\2714";   }

2.html内容

ul class="cleanfloat"><li><input type="checkbox" class="myCheck" checked="checked" id="ck1"><label for="ck1"></label>苏</li><li><input type="checkbox" class="myCheck" id="ck2"><label for="ck2"></label>小苏</li><li><input type="checkbox" class="myCheck" checked="checked" id="ck3"><label for="ck3"></label>苏小苏</li><li><input type="checkbox" class="myCheck" id="ck4"><label for="ck4"></label>苏小苏-CSDN</li><li><input type="checkbox" class="myCheck" checked="checked" id="ck5"><label for="ck5"></label>苏小苏-checkbox</li><li><input type="checkbox" class="myCheck" id="ck6"><label for="ck6"></label>苏小苏的博客</li></ul>

3.展示效果

3.总结
大家也可以根据自己的需要，自行变换样式与颜色！

转载于:https://www.cnblogs.com/sxs161028/p/7243876.html

css实现接地气的checkbox框相关推荐

html改变复选框颜色,如何利用纯CSS改变html？radio/checkbox默认背景颜色样式
本篇文章给大家带来的内容是关于如何利用纯CSS改变html?radio/checkbox默认背景颜色样式,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. CSS代码:input[typ ...
微信小程序 css边框阴影,微信小程序|CSS的内边距和圆框
本文首发于微信公众号: "算法与编程之美",欢迎关注,及时了解更多此系列文章. 问题描述在制作小程序的时候会经常用到浮动来设计各种组件的排版,微信小程序对排版的要求很高. 光有浮 ...
纯HTML+CSS+Jquery实现的修改密码框（密码强度动态验证，再次确认验证，密码长度动态显示）均实现，可直接运行使用
`在这里插入代码片 <head><meta charset="UTF-8"><title>纯HTML+CSS+Jquery实现的修改密码框< ...
使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
css实现照片上传的加号框
css实现照片上传的加号框 .div_imgall { border: 1px solid blue; width: 100px; height: 100px; position: relative ...
纯CSS实现带小三角提示框
要实现在页面上点击指定元素时,弹出一个信息提示框.在前面的文章中,我们已经简单介绍了如何使用纯 CSS 创建一个三角形.本文在此基础上,记录如何使用 CSS 创建带三角形的提示框. 实现的原理是创建一 ...
自学篇之-----纯css做的漂亮的单选框复选框样式
2019独角兽企业重金招聘Python工程师标准>>> <!DOCTYPE html> <html> <head> <title>ch ...
html怎么自动弹出模态框,纯CSS实现带点击模态框外部自动关闭的模态框
在网页中我们经常会用到模态框,一般会用于显示表单或者是提示信息.由于模态框涉及到页面上比较多的交互效果,最简单的交互就是打开以及关闭两个操作,而关闭又会涉及是否需要在打开状态下点击模态框外部能够关闭这 ...
JS+CSS点击弹出登陆框代码
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
CSS盒子模型之CSS3可伸缩框属性（Flexible Box）
CSS盒子模型(下) 一．CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

css实现接地气的checkbox框

css实现接地气的checkbox框相关推荐

最新文章

热门文章