美化radio和checkbox样式
HTML部分
<div id="holder">
<div>
<div class="tag">Checkbox Small</div>
<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label>
<input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label>
<input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label>
<input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>
</div>
<div>
<div class="tag">Checkbox Big</div>
<input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" /><label for="checkbox-2-1"></label>
<input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" /><label for="checkbox-2-2"></label>
<input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" /><label for="checkbox-2-3"></label>
<input type="checkbox" id="checkbox-2-4" class="regular-checkbox big-checkbox" /><label for="checkbox-2-4"></label>
</div>
<div style="text-align:center;clear:both;margin:10px 0">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div>
<div class="tag">Radio Small</div>
<div class="button-holder">
<input type="radio" id="radio-1-1" name="radio-1-set" class="regular-radio" checked /><label for="radio-1-1"></label><br />
<input type="radio" id="radio-1-2" name="radio-1-set" class="regular-radio" /><label for="radio-1-2"></label><br />
<input type="radio" id="radio-1-3" name="radio-1-set" class="regular-radio" /><label for="radio-1-3"></label><br />
<input type="radio" id="radio-1-4" name="radio-1-set" class="regular-radio" /><label for="radio-1-4"></label><br />
</div>
</div>
<div>
<div class="tag">Radio Big</div>
<div class="button-holder">
<input type="radio" id="radio-2-1" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-1"></label><br />
<input type="radio" id="radio-2-2" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-2"></label><br />
<input type="radio" id="radio-2-3" name="radio-2-set" class="regular-radio big-radio" checked /><label for="radio-2-3"></label><br />
<input type="radio" id="radio-2-4" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-4"></label><br />
<input type="radio" id="radio-2-5" name="radio-2-set" class="regular-radio big-radio" /><label for="radio-2-5"></label><br />
</div>
</div>
</div>
CSS部分
#holder {
width: 100%;
} #holder > div {
clear: both;
padding: 2%;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
float: left;
width: 96%;
} label {
display: inline;
} .regular-checkbox {
display: none;
} .regular-checkbox + label {
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 3px;
display: inline-block;
position: relative;
} .regular-checkbox + label:active, .regular-checkbox:checked + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
} .regular-checkbox:checked + label {
background-color: #e9ecee;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1);
color: #99a1a7;
} .regular-checkbox:checked + label:after {
content: '\2714';
font-size: 14px;
position: absolute;
top: 0px;
left: 3px;
color: #99a1a7;
} .big-checkbox + label {
padding: 18px;
} .big-checkbox:checked + label:after {
font-size: 28px;
left: 6px;
} .tag {
font-family: Arial, sans-serif;
width: 200px;
position: relative;
top: 5px;
font-weight: bold;
text-transform: uppercase;
display: block;
float: left;
} .radio-1 {
width: 193px;
} .button-holder {
float: left;
} /* RADIO */ .regular-radio {
display: none;
} .regular-radio + label {
-webkit-appearance: none;
background-color: #fafafa;
border: 1px solid #cacece;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05);
padding: 9px;
border-radius: 50px;
display: inline-block;
position: relative;
} .regular-radio:checked + label:after {
content: ' ';
width: 12px;
height: 12px;
border-radius: 50px;
position: absolute;
top: 3px;
background: #99a1a7;
box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3);
text-shadow: 0px;
left: 3px;
font-size: 32px;
} .regular-radio:checked + label {
background-color: #e9ecee;
color: #99a1a7;
border: 1px solid #adb8c0;
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);
} .regular-radio + label:active, .regular-radio:checked + label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
} .big-radio + label {
padding: 16px;
} .big-radio:checked + label:after {
width: 24px;
height: 24px;
left: 4px;
top: 4px;
}
美化radio和checkbox样式的更多相关文章
- 用纯CSS美化radio和checkbox
Radio和checkbox需要美化吗?答案是必须的,因为设计风格一直都会变化,原生的样式百年不变肯定满足不了需求. 先看看纯CSS美化过后的radio和checkbox效果:查看. 项目地址:mag ...
- 纯CSS3美化radio和checkbox
如题,主要通过CSS3来实现将radio和checkbox美化的效果.可是兼容性并非非常好,PC端仅仅支持chrome浏览器(IE和Firefox測试不行,其它没有很多其它測试).然后微信端和QQ端訪 ...
- 使用背景图修改radio、checkbox样式
如果觉得设置样式太麻烦,或者页面上选中的样式太复杂,也可以用背景图去修改样式<div class=""> <label><input type=&qu ...
- 使用css修改radio、checkbox样式
input[type=radio],input[type=checkbox] { display: inline-block; vertical-align: middle; width: 20px ...
- 前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
前言: 都说程序员有三宝:人傻,钱多,死得早.博主身边的程序“猿”一大半应了这三宝,这从侧面说明了一个问题,只有理性是过不好日子的.朋友们应该把工作与生活分开,让生活变得感性,让工作变得理性,两者相提 ...
- 修改radio、checkbox、select默认样式的方法
样式 radio select checkbox 兼容性 现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.ch ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 微信小程序 - 更改radio和checkbox选中样式
点击下载源码:示例-更改radio或checkbox选中样式
- 自定义radio/checkbox样式
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- eclipse整体设置
2.Eclipse for android 设置代码提示功能(1)设置 java 文件的代码提示功能打开 Eclipse 依次选择 Window > Preferences > Java ...
- iOS--手势之谜
原文转至: http://www.cnblogs.com/huangjianwu/p/4675648.html iOS在手机APP的手势操作中包含了:拖动.捏合.旋转.点按.长按.轻扫.自定义等等,详 ...
- 基于Flume+LOG4J+Kafka的日志采集架构方案
本文将会介绍如何使用 Flume.log4j.Kafka进行规范的日志采集. Flume 基本概念 Flume是一个完善.强大的日志采集工具,关于它的配置,在网上有很多现成的例子和资料,这里仅做简单说 ...
- fillStyle图片填充
图片自找 <!DOCTYPE HTML> <head> <meta charset = "utf-8"> <title>canvas ...
- SQL SERVER 2008 Reporting Services 的一些小问题集合
实验环境:服务器 Windows Server 2008 R2 Standard 64bit 数据库 SQL SERVER 2008 R2 Standard ...
- Linux 日志报错 xxx blocked for more than 120 seconds
监控作业发现一台服务器(Red Hat Enterprise Linux Server release 5.7)从凌晨1:32开始,有一小段时间无法响应,数据库也连接不上,后面又正常了.早上检查了监听 ...
- 变量声明和定义及extern 转载
在讨论全局变量之前我们先要明白几个基本的概念: 1. 编译单元(模块): 在IDE开发工具大行其道的今天,对于编译的一些概念很多人已经不再清楚了,很多程序员最怕的就是处理连接错误(LINK ER ...
- Json学习笔记
一.昨天内容回顾 创建ajax对象 a) 主流浏览器 new XMLHttpRequest(); b) IE浏览器 new ActiveXObject("Msxml2.XMLHTTP. ...
- java请求https地址如何绕过证书验证?
原文http://www.blogjava.net/hector/archive/2012/10/23/390073.html 第一种方法,适用于httpclient4.X 里边有get和post两种 ...
- stm32 按键
//°´¼ü³õʼ»¯º¯Êý void KEY_Init(void) //IO³õʼ»¯ { GPIO_InitTypeDef GPIO_InitStructure; //³õʼ»¯KEY0- ...