使用css美化checkbox

html如下：

<input type="checkbox" name="timeType" value="1" id="value1" checked="checked"/>
<label for="value1"></label>

css如下:

#value1{display: none;}#value1:checked+label{color:blue;background: #4cda60;}#value1:checked+label:before{left:31px;}#value1+label{cursor: pointer;color:red;display: block;width:60px;height: 30px;background: #fafbfa;border-radius: 15px;position: relative;box-shadow:inset 0 0 0 0 #eee,0 0 1px rgba(0,0,0,0.4);transition: background 0.1s;-webkit-transition: background 0.1s;-moz-transition: background 0.1s;-o-transition: background 0.1s;}#value1+label:before{content:'';position: absolute;background: #fff;top:1px;left:1px;width: 28px;height: 28px;border-radius: 50%;box-shadow:0 3px 1px rgba(0,0,0,0.05), 0 0 1px rgba(0,0,0,0.3);transition: left 0.1s;-webkit-transition: left 0.1s;-moz-transition: left 0.1s;-o-transition: left 0.1s;}

效果如下：

使用css美化checkbox相关推荐

CSS3和jQuery实现的自定义美化Checkbox和Radiobox
现在经常可以在网络上看到一些非常奇特的表单元素,例如Checkbox复选框和Radiobox单选框,浏览器默认的样式确实是太丑了,而且更让人蛋疼的是各个浏览器的样式还不统一,考虑到现在越来越多的用户使 ...
Form 表单详解：案例、CSS 美化
本文要点: 常见表单表单的性质表单CSS美化使用 radio 实现 Tab 选项卡什么是表单用户通过表单填写信息,然后通过计算机网络传送给服务器.表单标签不是一个标签,而是一组标签,因为不同 ...
html5搜索框美化,CSS美化的漂亮搜索框
CSS美化的漂亮搜索框我要搜索搜索 var $ = function(id){return document.getElementById(id);} var formSubmit = funct ...
10使用CSS美化页面
技术交流QQ群:1027579432,欢迎你的加入! 本教程来源于B站杨仕航Django2.0开发视频教程,如需转载,必须注明来源! 1.页面设计 2.导航栏设计打开blog文件夹的urls.py文 ...
在HTML中使用CSS美化网页的三种方法
在HTML中使用CSS美化网页的三种方法 CSS是Cascading Style Sheets(级联样式表)的缩写,CSS是一种样式表语言,用于为HTML文档定义布局.例如,CSS涉及字体.颜色.边距 ...
用CSS美化你的滚动条
本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用 ...
在线CSS美化格式化工具
在线CSS美化格式化工具在线CSS美化格式化工具美化格式化CSS:压缩缩小CSS 代码以美化.格式化.美化,使你的 CSS 更易于阅读.语法高亮.自动完成功能也可以更轻松地编写代码. 美化格式化C ...
移动端屏幕适配和css美化浏览器自带的滚动条
一.css美化浏览器自带的滚动条: 浏览器自带的滚动条显示不太美观,我们可以调css样式来美化一下.了解以下浏览器(webkit内核)滚动条自带伪类样式: ::-webkit-scrollbar:针对 ...
html表格边框美化,CSS美化表格边框汇总与效果
用css美化表格边框1 2 3 4 5 6 7 8 9 ...
css美化radio
需求使用css 美化 input type="radio" 如图: 代码 <input class="radio-beauty" type=" ...

使用css美化checkbox

使用css美化checkbox相关推荐

最新文章

热门文章