【特效】单选按钮和复选框的美化(只用css)
表单的默认样式都是比较朴素的,实际页面中往往需要美化他们。这里先说说单选按钮和复选框,有了css3,这个问题就变的好解决了。利用input与label相关联,对label进行美化并使其覆盖掉原本的input,并利用旋转属性transform实现复选框中的那个“√”,当然也可以使用背景图片。对于IE8以下嘛,当然不支持了,只能用默认样式了,所以用条件注释隐藏掉label吧。
html:
<div class="con">
<h1>单选框复选框的美化</h1>
<h2>复选框:</h2>
<span class="check_box">
<input type="checkbox" id="check_1">
<label for="check_1"></label>
<em>选项1</em>
</span>
<br><br>
<span class="check_box">
<input type="checkbox" id="check_2">
<label for="check_2"></label>
<em>选项2</em>
</span>
<br><br>
<h2>单选框:</h2>
<span class="radio_box">
<input type="radio" id="radio_1" name="radio" checked>
<label for="radio_1"></label>
<em>选项1</em>
</span>
<br><br>
<span class="radio_box">
<input type="radio" id="radio_2" name="radio">
<label for="radio_2"></label>
<em>选项2</em>
</span>
</div>
css:
body{ font:menu; font-size:16px;}
.con{ width:1000px; margin:0 auto;}
.con h1{ text-align:center;}
h1,h2{ font-weight:normal; color:#0CC;}
ul{ margin:0; padding:0; list-style:none;}
em{ font-style:normal;}
/*复选*/
.check_box{ display:inline-block; position:relative;}
.check_box label{ width:16px; height:16px; position:absolute; top:0; left:0; border:2px solid #cacaca; border-radius:50%; background:#fff; cursor:pointer;}
.check_box label:hover{ border:2px solid #f78642;}
.check_box label:after{ content:''; width:8px; height:4px; position:absolute; top:4px; left:3px; border:2px solid #cacaca; border-top:none; border-right:none; opacity:0.4; transform:rotate(-45deg); /*-webkit-transform:rotate(-45deg);*/}
.check_box label:hover:after{ border:2px solid #f78642; border-top:none; border-right:none;}
.check_box input:checked + label{ border:2px solid #f78642;}
.check_box input:checked + label:after{ opacity:1; border:2px solid #f78642; border-top:none; border-right:none;}
.check_box em{ margin:0 0 0 5px;}
/*单选*/
.radio_box{ display:inline-block; position:relative;}
.radio_box label{ width:15px; height:15px; position:absolute; top:0; left:0; border:2px solid #ef4949; border-radius:50%; background:#fff; cursor:pointer;}
.radio_box input:checked + label:after{ content:''; width:9px; height:9px; position:absolute; top:3px; left:3px; background:#ef4949; border-radius:50%;}
.check_box em{ margin:0 0 0 5px;}
</style>
<!--[if lte IE 8]>
<style>
.check_box label,.radio_box label{display:none;}
</style>
<![endif]-->
效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/2847.htm
源码下载:http://pan.baidu.com/s/1pKX0Qlt
【特效】单选按钮和复选框的美化(只用css)的更多相关文章
- UI设计规范:单选按钮 vs 复选框,没那么简单
无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件.这两个组件看似意义明确,很好区分,但在实际设计中却很容易用错,带来不好的用户体验. 本文中我通过列举几个典型的错误用法,帮助设 ...
- mui开发中获取单选按钮、复选框的值
js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); retur ...
- [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框
本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...
- NopCommerce 3.4中商品详情页面单选框、复选框的美化
先上图给大家看看效果,点这里打开网站(后期可能会找不到这个商品,现在再测试阶段) 现在你能看到的这个页面中,尺寸.文本描述是单选框(属性是我乱写的名字),上门安装是复选框.效果就看到这里,请君跳过图片 ...
- 20151215单选按钮列表,复选框列表:CheckBoxList
单选框:RadioButton GroupName:组名,如果要实现单选效果每个单选按钮的组名必须一样 是否被选中 RadioButton.checked 单选按钮列表:RadioButtonList ...
- DOM(十)使用DOM设置单选按钮、复选框、下拉菜单
1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...
- JQ 操作样式,单选按钮跟复选框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 3.Android之单选按钮RadioGroup和复选框Checkbox学习
单选按钮和复选框在实际中经常看到,今天就简单梳理下. 首先,我们在工具中拖进单选按钮RadioGroup和复选框Checkbox,如图: xml对应的源码: <?xml version=&quo ...
- 使用CSS3美化复选框checkbox
我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...
随机推荐
- Http协议详解,获取doPost,doGet提交的数据,以及编码问题
一 什么是Http协议 http协议: 浏览器客户端 和 服务器端 之间数据传输的格式规范 二 如何查看Http协议的内容 1)使用火狐的firebug插件(右键->firebug->网 ...
- 201521123052《Java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123057 《Java程序设计》第10周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...
- 201521123096《Java程序设计》第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...
- 201521123116 《java程序设计》第十周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 Q1 finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中fi ...
- 201521123099 《Java程序设计》第13周学习总结
本周学习总结 书面作业 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.2 telnet bbs. ...
- Jquery总结图
读完锋利Jquery第二版书,对其进行整理做出的思维导图:
- 14.LINUX-platform机制实现驱动层分离(详解)
版权声明:本文为博主原创文章,未经博主允许不得转载. 本节目标: 学习platform机制,如何实现驱动层分离 1.先来看看我们之前分析输入子系统的分层概念,如下图所示: 如上图所示,分 ...
- 【设计模式】module(模块)模式
写在前面 最近刚接触到设计模式, <head first设计模式>里有一篇文章,是说使用模式的心智, 1.初学者"心智" :"我要为HELLO WORLD找个 ...
- RG_5
必须发博纪念经过昨天的开车, 作业本终于做完啦!!! 可以认真的刷题了.