<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Checkbox样式</title> <style type="text/css" media="screen"> body{ color:#444; font-size:1.6em; background:#ccc; } .container{ width:90%; margin:20px 3%; padding:25px; min-height:400px; height:auto; background: #FFF; } section { float:left; width:30%; margin:20px 20px; } hr{ clear:both; } /** * Start by hiding the checkboxes */ input[type=checkbox] { visibility: hidden; } /** * Create the slider bar */ .checkboxOne { width: 40px; height: 10px; background: #555; margin: 20px 80px; position: relative; border-radius: 3px; } /** * 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; } /** * Move the slider in the correct position if the checkbox is clicked */ .checkboxOne input[type=checkbox]:checked + label { left: 27px; } /** * Checkbox Two */ .checkboxTwo { width: 120px; height: 40px; background: #333; margin: 20px 60px; border-radius: 50px; position: relative; } /** * Create the line for the circle to move across */ .checkboxTwo:before { content: ''; position: absolute; top: 19px; left: 14px; height: 2px; width: 90px; background: #111; } /** * 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; } /** * Create the click event for the checkbox */ .checkboxTwo input[type=checkbox]:checked + label { left: 84px; background: #26ca28; } /** * Checkbox Three */ .checkboxThree { width: 120px; height: 40px; background: #333; margin: 20px 60px; border-radius: 50px; position: relative; } /** * 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 label 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 * @type {[type]} */ .checkboxThree input[type=checkbox]:checked + label { left: 60px; background: #26ca28; } /** * 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); } /** * 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 Five */ .checkboxFive { width: 25px; margin: 20px 100px; position: relative; } /** * 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; } /** * 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); } /** * 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; } </style> </head> <body> <section class="container"> <section> <!-- 样式一 --> <h3>样式一</h3> <div class="checkboxOne"> <input type="checkbox" value="1" id="checkboxOneInput" name="" /> <label for="checkboxOneInput"></label> </div> </section> <section> <!-- 样式二 --> <h3>样式二</h3> <div class="checkboxTwo"> <input type="checkbox" value="1" id="checkboxTwoInput" name="" /> <label for="checkboxTwoInput"></label> </div> </section> <section> <!-- 样式三 --> <h3>样式三</h3> <div class="checkboxThree"> <input type="checkbox" value="1" id="checkboxThreeInput" name="" /> <label for="checkboxThreeInput"></label> </div> </section> <section> <!-- 样式四 --> <h3>样式四</h3> <div class="checkboxFour"> <input type="checkbox" value="1" id="checkboxFourInput" name="" /> <label for="checkboxFourInput"></label> </div> </section> <section> <!-- 样式五 --> <h3>样式五</h3> <div class="checkboxFive"> <input type="checkbox" value="1" id="checkboxFiveInput" name="" /> <label for="checkboxFiveInput"></label> </div> </section> <div style="clear:both;"></div> </section> </body> </html>
效果图:
相关推荐
下面是纯CSS设置Checkbox复选框控件的五种简单样式,有兴趣的可以进行改动将其变成自己想要的样式。 首先,需要添加一段CSS隐藏所有的Checkbox复选框,下面我们会改变它的外观。要做到点需要添加一段代码到你的CSS...
主要介绍了一些CSS的Checkbox复选框样式的代码分享,针对一些简单页面控件的设计,需要的朋友可以参考下
checkbox_radio.css是一款用于美化Checkbox和Radio控件的CSS小插件。通过checkbox_radio提供的样式,你可以生成基于bootstrap,或字体图标,或图片的Checkbox和Radio美化样式。
Pretty Checkbox 是一个纯 CSS 库用来美化复选框和单选按钮
checkbox、radio美化(ICheck插件、css属性、借助图片三种方式,个人收藏),希望对前端开的的你在处理checkbox、radio标签的美化上能有所帮助!
7、行的指定复选框选中的时候改变该行的样式,行的指定复选框取消选中的时候恢复该行的样式 使用方法(设置CheckedRowCssClass复合属性): CheckBoxID - 模板列中 数据行的复选框ID CssClass - 选中的行的 CSS ...
表单控件——复选框checkbox和单选择按钮radio</title> <!-- 最新版本的 Bootstrap 核心 CSS 文件 --> <link rel=stylesheet href=https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min
在模板列的头模板处添加一个复选框,在模板列的项模板处添加一个复选框,然后设置控件的CheckboxAlls属性 CheckboxAllID - 模板列全选复选框ID CheckboxItemID - 模板列项复选框ID 5、固定表头、指定行或指定列 ...
3) 复选框控件ID (string) 4) 空参数(尽量不用空参数) 增加复选框选择:全选、取消、反选,需要调用 .setChecked(oper, name) oper: 1-全选,2-取消,3-反选; name: checkbox的 name属性名称 解决启用...
web开发中所有的输入控件中复选框和单选框的样式是最难去设计的,因为不同的浏览器及其操作系统对于样式的渲染展现是不一样的。但是在jQuery的帮 助下我们可以整体的改变他们的样式。这里我们将介绍12款实用的美化...
优化界面的复选框和单选框控件,纯css3漂亮的checkbox和radio美化效果
行的指定复选框取消选中的时候恢复该行的样式 使用方法(设置CheckedRowCssClass复合属性): CheckBoxID - 模板列中 数据行的复选框ID CssClass - 选中的行的 CSS 类名 <br>8、导出数据源的数据为...
-优化复选框列表和单选按钮列表,减少生成的代码量。 -修正CheckBoxList和RadioButtonList无法在回发中更新的BUG(破风、吉吉﹑落叶飞尘)。 -修正CheckBoxList和RadioButtonList初始为空时页面不能显示的BUG(e先生...
所谓CheckBox控件就是我们一般所说的复选框,通常用于某选项的打开或关闭。最近在工作中遇到一个需求,需要自定义checkbox的样式,最终实现了好几种样式,所以想着分享出来给大家,有需要的朋友们可以参考学习,下面...
大家都知道默认的html复选框控件样式可定义相当有限,无法满足大多用户的美观度。今天跟大家一起分享前一段时间自己编写的CheckBox控件。喜欢的朋友可以拿去使用,有什么好的建议希望你给我留言。废话不多说,切入...
2.2.2 使用CheckBox控件 50 2.2.3 使用RadioButton控件 52 2.3 提交表单数据 55 2.3.1 使用Button控件 55 2.3.2 使用LinkButton控件 57 2.3.3 使用ImageButton控件 59 2.3.4 Button控件使用客户端脚本 62 2.3.5 执行...
18.jQuery美化复选框Checkbox和radio单选框的插件hcheckbox示例 19.jQuery漂亮Flash卡通动感菜单示例 20.jQuery漂亮动感二级网站导航菜单源码下载 21.jquery漂亮苹果系统动画效果的导航菜单示例 22.jquery...
-优化复选框列表和单选按钮列表,减少生成的代码量。 -修正CheckBoxList和RadioButtonList无法在回发中更新的BUG(破风、吉吉﹑落叶飞尘)。 -修正CheckBoxList和RadioButtonList初始为空时页面不能显示的BUG(e先生...
5.6 复选框控件和复选组控件(CheckBox 和CheckBoxList) 5.6.1 复选框控件(CheckBox) 5.6.2 复选组控件(CheckBoxList) 5.7 列表控件(DropDownList,ListBox 和BulletedList) 5.7.1 DropDownList 列表控件 ...