单选框,复选框美化(纯css)
时间:2019-02-18
本文章向大家介绍单选框,复选框美化(纯css),主要包括单选框,复选框美化(纯css)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
单选框,复选框美化
废话不多说先上图
接着是代码
index.html
<!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>
单选框
<div class="RadioStyle">
<div class="Block PaddingL">
<input type="radio" name="Storage" id="model1" />
<label for="model1">单选框A</label>
<input type="radio" name="Storage" id="model2" />
<label for="model2">单选框B</label>
<input type="radio" name="Storage" id="model3" />
<label for="model3">单选框C</label>
<input type="radio" name="Storage" id="model4" checked />
<label for="model4">单选框D</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">多选框1</label>
<input type="checkbox" id="love2" />
<label for="love2">多选框2</label>
<input type="checkbox" id="love3" />
<label for="love3">多选框3</label>
<input type="checkbox" id="love4" checked />
<label for="love4">多选框4</label>
</div>
</div>
<div class="clear"></div>
</body>
</html>
svg图
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="ico_checkon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" viewBox="0 0 42 42" style="enable-background:new 0 0 42 42;" xml:space="preserve">
<style type="text/css">
.st0{fill-rule:evenodd;clip-rule:evenodd;fill:#00A4FF;}
.st1{fill:#FFFFFF;}
</style>
<g>
<g>
<polygon class="st0" points="42,42 42,0.5 0.5,42 "/>
</g>
</g>
<path class="st1" d="M19.4,26.9l8.5,8.5L25,38.2l-8.5-8.5L19.4,26.9z M36.4,21.2l2.8,2.8L25.1,38.2l-2.8-2.8L36.4,21.2z"/>
</svg>
- 整理的一些模版LCS(连续和非连续)
- 以太坊开发实战(第1部分:智能合约)
- spark2 sql读取数据源编程学习样例2:函数实现详解
- hdu---(4310)Hero(贪心算法)
- 数据库容器化|未来已来
- crontab命令详解
- hdu----(4308)Saving Princess claire_(搜索)
- spark2 sql读取数据源编程学习样例1
- golang的一个分页方法
- spark2 sql读取json文件的格式要求
- 容器化RDS|调度策略
- Go语言并发编程总结
- hdu------(4302)Holedox Eating(树状数组+二分)
- spark2的SparkSession思考与总结2:SparkSession有哪些函数及作用是什么
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- Laravel框架自定义验证过程实例分析
- Codeigniter里的无刷新上传的实现代码
- django ObjectDoesNotExist 和 DoesNotExist的用法
- PHP PDOStatement::closeCursor讲解
- 使用python实现下载我们想听的歌曲,速度超快
- JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
- OpenCV4.1.0+VS2017环境配置的方法步骤
- 详解如何实现Laravel的服务容器的方法示例
- laravel 数据迁移与 Eloquent ORM的实现方法
- PDO::query讲解
- Laravel5框架自定义错误页面配置操作示例
- PHP-FPM和Nginx的通信机制详解
- PHP PDOStatement::columnCount讲解
- PHP中上传文件打印错误错误类型分析
- Laravel如何创建服务器提供者实例代码