纯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 方法.定位一组对象 ...
随机推荐
- extentreports
关于extentreports使用的一些个人见解 首先导入jar包, 使用maven导入,我再次首先导入的是 <version>4.0.5</version>版本的jar包,但 ...
- CSS3之3D轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- RAND函数和SRAND函数
首先我们要对rand&srand有个总体的看法:srand初始化随机种子,rand产生随机数,下面将详细说明. rand(产生随机数) 表头文件: #include<stdlib.h&g ...
- 无法启动此程序，因为计算机中丢失VCRUNTIME140.dll 尝试重新安装此程序以解决此问题
最近在阿里云上租了个服务器,想借此发布一些自己制作的网页.于是就打算安装一下环境,考虑到搭建动态网站所要安装的环境比较多,于是就选择了wampserver这样一个集成环境的安装. 由于我的服务器很新( ...
- 团队第七次 # scrum meeting
github 本此会议项目由PM召开,召开时间为4-11日晚上9点,以大家在群里讨论为主 召开时长10分钟 任务表格 袁勤 负责协调前后端 https://github.com/buaa-2016/p ...
- mongoexport 导出需要授权数据库中的集合 报错 Authentication failed.
当 mongo数据库启动服务时,使用了 认证机制,在使用mongoexport导出集合文件时,需要用户权限认证. 开启数据库认证服务: mongod --auth 导出mongo中集合文件: mong ...
- 使用requests+BeautifulSoup爬取龙族V小说
这几天想看龙族最新版本,但是搜索半天发现 没有网站提供 下载, 我又只想下载后离线阅读(写代码已经很费眼睛了).无奈只有自己 爬取了. 这里记录一下,以后想看时,直接运行脚本 下载小说. 这里是从 ...
- Oracle两个数据库联合查询,使用Oracle DBLink
创建dblink -- Create database link create shared database link COPYCITY_BZTOMY connect to db_A identif ...
- Android 开发 8.0版本启动Service的方法
前言 google在更新Android8.0后对Service的权限越发收紧.导致目前想要启动服务必需实现服务的前台化(否则在服务启动5秒后,系统将自动报错).下面我们就来看看如何在8.0上启动服务 ...
- 转载：消息队列MQ
本文大概围绕如下几点进行阐述: 为什么使用消息队列? 使用消息队列有什么缺点? 消息队列如何选型? 如何保证消息队列是高可用的? 如何保证消息不被重复消费? 如何保证消费的可靠性传输? 如何保证消息的 ...