表单的默认样式都是比较朴素的,实际页面中往往需要美化他们。这里先说说单选按钮和复选框,有了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)的更多相关文章

  1. UI设计规范:单选按钮 vs 复选框,没那么简单

    无论是网页设计,还是移动app设计,都经常用到单选按钮和复选框这两个组件.这两个组件看似意义明确,很好区分,但在实际设计中却很容易用错,带来不好的用户体验. 本文中我通过列举几个典型的错误用法,帮助设 ...

  2. mui开发中获取单选按钮、复选框的值

    js获取单选按钮的值 function getVals(){ var res = getRadioRes('rds'); if(res == null){mui.toast('请选择'); retur ...

  3. [ PyQt入门教程 ] PyQt5基本控件使用:单选按钮、复选框、下拉框

    本文主要介绍PyQt5界面最基本使用的单选按钮.复选框.下拉框三种控件的使用方法进行介绍. 1.RadioButton单选按钮/CheckBox复选框.需要知道如何判断单选按钮是否被选中. 2.Com ...

  4. NopCommerce 3.4中商品详情页面单选框、复选框的美化

    先上图给大家看看效果,点这里打开网站(后期可能会找不到这个商品,现在再测试阶段) 现在你能看到的这个页面中,尺寸.文本描述是单选框(属性是我乱写的名字),上门安装是复选框.效果就看到这里,请君跳过图片 ...

  5. 20151215单选按钮列表,复选框列表:CheckBoxList

    单选框:RadioButton GroupName:组名,如果要实现单选效果每个单选按钮的组名必须一样 是否被选中 RadioButton.checked 单选按钮列表:RadioButtonList ...

  6. DOM(十)使用DOM设置单选按钮、复选框、下拉菜单

    1.设置单选按钮 单选按钮在表单中即<input type="radio" />它是一组供用户选择的对象,但每次只能选一个.每一个都有checked属性,当一项选择为t ...

  7. JQ 操作样式,单选按钮跟复选框

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. 3.Android之单选按钮RadioGroup和复选框Checkbox学习

    单选按钮和复选框在实际中经常看到,今天就简单梳理下. 首先,我们在工具中拖进单选按钮RadioGroup和复选框Checkbox,如图: xml对应的源码: <?xml version=&quo ...

  9. 使用CSS3美化复选框checkbox

    我们知道HTML默认的复选框样式十分简陋,而以图片代替复选框的美化方式会给页面表单的处理带来麻烦,那么本文将结合实例带您一起了解一下使用CSS3将复选框checkbox进行样式美化,并且带上超酷的滑动 ...

随机推荐

  1. Http协议详解,获取doPost,doGet提交的数据,以及编码问题

    一 什么是Http协议 http协议: 浏览器客户端 和  服务器端 之间数据传输的格式规范 二 如何查看Http协议的内容 1)使用火狐的firebug插件(右键->firebug->网 ...

  2. 201521123052《Java程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...

  3. 201521123057 《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  4. 201521123096《Java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 本次PTA作业题集异常.多线程 1.finally 题目4-2 1.1 截图你的提交结果(出 ...

  5. 201521123116 《java程序设计》第十周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 2. 书面作业 Q1 finally 题目4-2 1.1 截图你的提交结果(出现学号) 1.2 4-2中fi ...

  6. 201521123099 《Java程序设计》第13周学习总结

    本周学习总结 书面作业 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.2 telnet bbs. ...

  7. Jquery总结图

    读完锋利Jquery第二版书,对其进行整理做出的思维导图:

  8. 14.LINUX-platform机制实现驱动层分离(详解)

    版权声明:本文为博主原创文章,未经博主允许不得转载. 本节目标:        学习platform机制,如何实现驱动层分离 1.先来看看我们之前分析输入子系统的分层概念,如下图所示: 如上图所示,分 ...

  9. 【设计模式】module(模块)模式

    写在前面 最近刚接触到设计模式, <head first设计模式>里有一篇文章,是说使用模式的心智, 1.初学者"心智" :"我要为HELLO WORLD找个 ...

  10. RG_5

    必须发博纪念经过昨天的开车, 作业本终于做完啦!!! 可以认真的刷题了.