表单的默认样式都是比较朴素的,实际页面中往往需要美化他们。这里先说说单选按钮和复选框,有了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. Java运算符和流程控制

    1 运算符 1.1  比较运算符 比较运算符的结果都是boolean类型,也即是要么是true,要么是false. 比较运算符"=="不能写成"=". > ...

  2. 【1414软工助教】团队作业7——Alpha冲刺之事后诸葛亮 得分榜

    题目 团队作业7--Alpha冲刺之事后诸葛亮 往期成绩 个人作业1:四则运算控制台 结对项目1:GUI 个人作业2:案例分析 结对项目2:单元测试 团队作业1:团队展示 团队作业2:需求分析& ...

  3. 团队作业4——第一次项目冲刺(Alpha版本)第五天

    天气阴转晴 一.Daily Scrum Meeting照片 二.燃尽图 三.项目进展 1.界面 功能界面已经大致完成 实现判断学生答题正误的界面 2.出题方面 实现错题库的构造 四.困难与问题 1.项 ...

  4. vbs读取excel的一个实例

    功能:在excel中对ip与loginType这两列进行遍历读取.本程序依赖于excel文件的"sheet2"表单中具有这两列. dim dictTarget, objExcel ...

  5. java课程设计---彩票销售管理系统

    彩票购买销售系统 1.项目git地址 https://git.oschina.net/fenm/lotterry.git 部分项目地址提交截图 项目主要功能图 团队博客链接 http://www.cn ...

  6. 201521123079《java程序设计》第13周学习总结

    1. 本周学习总结 1.以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. (1)netassist可以用来链接IP端口 (2)accept方法可以用来监听端口,当没有客户端连接 ...

  7. webservice第一篇【介绍、Scoket、http调用、wsimport调用】

    WebService介绍 首先我们来谈一下为什么需要学习webService这样的一个技术吧-. 问题一 如果我们的网站需要提供一个天气预报这样一个需求的话,那我们该怎么做????? 天气预报这么一个 ...

  8. bookStore案例第一篇【部署开发环境、解决分类模块】

    前言 巩固Servlet+JSP开发模式,做一个比较完整的小项目 成果图 该项目包含了两个部分,前台和后台. 前台用于显示 后台用于管理 该项目可分为5个模块来组成:分类模块,用户模块,图书模块,购买 ...

  9. mongodb 在windows下面进行分片

    在mongodb里面存在另一种集群,就是分片技术,跟sql server的表分区类似,我们知道当数据量达到T级别的时候,我们的磁盘,内存就吃不消了,针对这样的场景我们该如何应对. 一:分片 mongo ...

  10. MapReduce中Combiner规约的作用以及不能作为MR标配的原因

    作用:在Mapper端对数据进行Combine归约处理,Combine业务逻辑与Reducer端做的完全相同.处理后的数据再传送到Reducer端,再做一次归约.这样的好处是减少了网络传输的数量.在M ...