纯css3单选框/复选框美化样式代码
纯CSS 单/复选框 美化请选择iPhone 型号
选择兴趣爱好
原理在这里 input:checked + label
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" name="viewport" />
<style type="text/css">
body {
font: 14px/150% microsoft yahei,tahoma;
}
.clear {
clear: both
}
.RadioStyle input {
display: none
}
.RadioStyle label {
border: 1px solid #00a4ff;
padding: 2px 10px 2px 5px;
line-height: 28px;
min-width: 80px;
text-align: center;
float: left;
margin: 2px;
border-radius: 4px
}
.RadioStyle input:checked + label {
background: url(images/ico_checkon.svg) no-repeat right bottom;
background-size: 21px 21px;
color: #00a4ff
}
</style>
<title>纯CSS 单/复选框 美化</title>
</head>
<body>
请选择iPhone 型号
<div class="RadioStyle">
<div class="Block PaddingL">
<input type="radio" name="Storage" id="model1" />
<label for="model1">iPhone 6s</label>
<input type="radio" name="Storage" id="model2" />
<label for="model2">iPhone 6s Plus</label>
<input type="radio" name="Storage" id="model3" />
<label for="model3">iPhone 7</label>
<input type="radio" name="Storage" id="model4" checked />
<label for="model4">iPhone 7 Plus</label>
</div>
</div>
<div class="clear"></div>
<p> </p>
<p> </p>
选择兴趣爱好
<div class="RadioStyle">
<div class="Block PaddingL">
<input type="checkbox" id="love1" />
<label for="love1">女</label>
<input type="checkbox" id="love2" />
<label for="love2">绘画</label>
<input type="checkbox" id="love3" />
<label for="love3">摄影</label>
<input type="checkbox" id="love4" checked />
<label for="love4">骑行</label>
</div>
</div>
<div class="clear"></div>
原理在这里 input:checked + label
</body>
</html>
纯css3单选框/复选框美化样式代码的更多相关文章
- 关于通过jq /js 实现验证单选框 复选框是否都有被选中
今天项目中遇到一个问题 就是要实现,单选框,复选框 同时都被选中才能进行下一步的问题,开始用js原生来写 怎么写都觉得不合适,通过for循环得出 复选框被选中的,在通过for循环得出单选框被选中的,问 ...
- php一些单选、复选框的默认选择方法（示例）
转载 http://www.php.cn/php-weizijiaocheng-360029.html 一. radio和checkbox及php select默认选择的实现代码 1.radio单选框 ...
- Python3+Selenium3+webdriver学习笔记8（单选、复选框、弹窗处理）
#!/usr/bin/env python# -*- coding:utf-8 -*-'''Selenium3+webdriver学习笔记8(单选.复选框.弹窗处理)''' from selenium ...
- iCheck获取单选和复选框的值和文本
//获取单选和复选框的值//parameters.type:"radio","checkbox"//parameters.name:input-name//pa ...
- 纯css美化单选、复选框
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 单选框 复选框 隐藏之后，绑定的change事件在ie中失效的问题
有时候需要对单选框和复选框进行美化,就需要在<input type="radio">和<input type="checkbox">元素 ...
- 【转】纯CSS设置Checkbox复选框控件的样式
Checkbox复选框是一个可能每一个网站都在使用的HTML元素,但大多数人并不给它们设置样式,所以在绝大多数网站它们看起来是一样的.为什么不把你的网站中的Checkbox设置一个与众不同的样式,甚至 ...
- jquery单选框 复选框表格高亮 选中
单选框: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/T ...
- selenium+Python（定位 单选、复选框，多层定位）
1.定位一组元素webdriver 可以很方便的使用 findElement 方法来定位某个特定的对象,不过有时候我们却需要定位一组对象,这时候就需要使用 findElements 方法.定位一组对象 ...
随机推荐
- SQL查询某库所有的表所有的字段及字段的属性
then d.name else null end) 表名, a.colorder 字段序号, a.name 字段名, ( then '√'else '' end) 标识, ( then '√' el ...
- Chapter07 链表(下)：如何轻松学出正确的链表代码？
技巧一:理解指针或引用的含义 技巧二:指针丢失和内存泄漏 技巧三:利用哨兵简化实现难度 技巧四:重点留意边界条件处理 如果链表未空时,代码是否能够正常运行 如果链表只包含一个节点时,代码能否正常运行 ...
- php查询mysql数据库
1.连接数据库,写成一个php,其他文件直接include <?php $connect = mysql_connect("ip地址","用户",&quo ...
- 题 FatMouse‘Trade
FatMouse准备了M磅的猫食,准备与守卫仓库的猫交易,这些猫包含他最喜欢的食物,JavaBean. 仓库有N个房间.第i间房间包含J [I]磅的JavaBeans,并且需要F [i]磅的猫粮.Fa ...
- 蒙特卡洛树,AMAF,Rave浅析
蒙特卡洛树搜索: MCTS使用蒙特卡洛模拟来估计每个节点的价值. 其默认策略为贪婪算法, 即每次选择价值最高的节点进行模拟, 在每次模拟得到结果后, 将结果反馈回每个上级节点, 更新节点价值. 通常来 ...
- dubbo . dubbo Please check registry access list (whitelist/blacklist) 错误
dubbo Please check registry access list (whitelist/blacklist) dubbo服务调用provider失败.解决办法: 再consumer的服务 ...
- 修改系统和MySQL时区
修改时间时区比想象中要简单: 各版本系统通用的方法 # cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime # cp /usr/share/zone ...
- laravel5.6中Session store not set on request问题如何解决
先找到文件app下的Kernel.php文件,在文件中加入下列代码 protected $middleware = [ \Illuminate\Foundation\Http\Middleware\C ...
- take it easy
昨天魏辉在群里说,觉得自己以前很多事情做的不对,以前是个傻瓜,我说我也是这么觉得的.为什么这么说呢?因为我真的觉得以前的自己就是个SB.人的成长可能就是这样的吧,小时候的一些事情,或者是原生家庭的环境 ...
- cxgrid属性说明，每次用的时候费时费力查找。
由层得到数据表名: procedure TFB_PatientWaiting.cxgrdbtblvwGrid1DBTableView_MyPatienWaitingDblClick( Sender: ...