纯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 方法.定位一组对象 ...
随机推荐
- Layout-1相关代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 通过JS 给这个input加一个事件 获得焦点，回车事件绑定
通过JS 给这个input加一个事件 就是获得焦点就行了 window.onload = function(){ var oInput = document.getElementById(" ...
- 部署Redis4.x单机版及配置RDB和AOF持久化
一.环境及软件 OS soft version CentOS 7.5 redis-4.0.12(目前是4.x最新) 二.下载及编译Redis [root@localhost ~]# wget h ...
- 判断单向连通图（拓扑排序+tarjan缩点）
题意: 给你一个有向图,如果对于图中的任意一对点u和v都有一条从u到v的路或从v到u的路,那么就输出’Yes’,否则输出’No’. 理解:当出现两个及以上入度为0的点(有一个就可能是别人到它,有两个的 ...
- java基础回忆、复习（一）
一:浅拷贝与深拷贝: 对于基本数据类型,直接进行拷贝,String类型,有两种拷贝方式: 1:直接将原对象中的name的引用值拷贝给新对象的name字段.<浅拷贝> 2:根据原对象中的na ...
- Web漏洞扫描工具（批量脱壳、反序列化、CMS）
一.什么是Web漏洞扫描工具 即是指“扫描Web应用以查找安全漏洞(如跨站脚本,SQL注入,命令执行,目录遍历和不安全服务器配置)的自动化工具”,其中许多可能是由不安全或不正确的编码和设计.另一方面, ...
- jQuery+php+Ajax文章列表点击加载更多功能
jQuery+php+Ajax实现的一个简单实用的文章列表点击加载更多功能,点击加载更多按钮,文章列表加载更多数据,加载中有loading动画效果. js部分: <script type=&qu ...
- MYSQL临时表使用方法
当工作在非常大的表上时,你可能偶尔需要运行很多查询获得一个大量数据的小的子集,不是对整个表运行这些查询,而是让MySQL每次找出所需的少数记录,将记录选择到一个临时表可能更快些,然后在这些表运行查询. ...
- socket.io诡异的问题
在socket.io客户端连接的时候,如果传入的query包含“sid”这个键时会报错,不知道具体原因.
- 求$N^N$的首位数字
正如＂大得多＂定理所言,当$n\longrightarrow \infty$时: $$ n^n \gg n! \gg a^n \gg n^b \gg ln^kn $$ $f(n) = n^n$的增长 ...