HTML的checkbox和radio的美化
checkbox和radio的美化
checkbox：
<style type="text/css">
input[type="checkbox"]
{
display: none;
} input[type="checkbox"] + label
{
display: inline-block;
position: relative;
border: solid 2px #99a1a7;
width: 35px;
height: 35px;
line-height: 35px;
border-radius: 4px;
} input[type="checkbox"]:checked + label:after
{
content: '\2714';
font-size: 25px;
color: #99a1a7;
width: 35px;
height: 35px;
line-height: 35px;
position: absolute;
text-align: center;
background-color: #e9ecee;
} .tab
{
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
} .tab td
{
border: solid 1px #f99;
font-size: 25px;
line-height: 39px;
}
</style> <table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td>
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="ck101" type="checkbox" />
<label for="ck101"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试101
</div>
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="ck102" type="checkbox" />
<label for="ck102"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试102
</div>
测试
</td>
<td></td>
</tr>
<tr>
<td style="text-align: center;">
<div style="display: inline-block;">
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="ck103" type="checkbox" />
<label for="ck103"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试103
</div>
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="ck104" type="checkbox" />
<label for="ck104"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试104
</div>
测试
</div>
</td>
<td>测试
</td>
</tr>
</table> <div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="ck201" type="checkbox" />
<label for="ck201"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试201
</div>
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="ck202" type="checkbox" />
<label for="ck202"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">
测试202
</div>
</div>
radio：
<style type="text/css">
input[type="radio"]
{
display: none;
} input[type="radio"] + label
{
display: inline-block;
position: relative;
border: solid 2px #99a1a7;
width: 25px;
height: 25px;
line-height: 25px;
padding: 5px;
border-radius: 19.5px;
} input[type="radio"]:checked + label:after
{
content: ' ';
font-size: 25px;
color: #99a1a7;
width: 25px;
height: 25px;
line-height: 25px;
position: absolute;
text-align: center;
background-color: #99a1a7;
border-radius: 12.5px;
} input[type="radio"]:checked + label
{
background-color: #e9ecee;
} .tab
{
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
} .tab td
{
border: solid 1px #f99;
font-size: 25px;
line-height: 39px;
}
</style> <table class="tab" cellpadding="0" cellspacing="0" style="border-collapse: collapse;">
<tr>
<td>
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="rd101" name="rd" type="radio" />
<label for="rd101"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试101
</div>
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="rd102" name="rd" type="radio" />
<label for="rd102"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试102
</div>
测试
</td>
<td></td>
</tr>
<tr>
<td style="text-align: center;">
<div style="display: inline-block;">
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="rd103" name="rd" type="radio" />
<label for="rd103"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试103
</div>
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="rd104" name="rd" type="radio" />
<label for="rd104"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试104
</div>
测试
</div>
</td>
<td>测试
</td>
</tr>
</table> <div style="border: solid 1px #f99; height: 39px; margin-top: 20px; margin-bottom: 20px;">
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="rd201" name="rd" type="radio" />
<label for="rd201"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px; margin-right: 20px;">
测试201
</div>
<div align="center" style="float: left; height: 39px; width: 39px;">
<input id="rd202" name="rd" type="radio" />
<label for="rd202"></label>
</div>
<div style="float: left; height: 39px; line-height: 39px; font-size: 25px; margin-left: 10px;">
测试202
</div>
</div>
效果图：
HTML的checkbox和radio的美化的更多相关文章
- css input checkbox和radio样式美化
参考:https://segmentfault.com/a/1190000004553258 http://www.haorooms.com/post/css_mh_ck_radio 思路都一样的,先 ...
- jquery插件：select、checkbox、radio的美化
引用文件: <script src=”/InputPick/jqInputFormat.js” type=”text/javascript”></script> <li ...
- ［原创］纯JS实现网页中多选复选框checkbox和单选radio的美化效果
图片素材: 最终效果图: <html><title> 纯JS实现网页中多选复选框checkbox和单选radio的美化效果</title><head>& ...
- input美化 checkbox和radio样式
input美化 checkbox和radio样式 看惯了input[checkbox]和input[radio]默认样式,有没有想要改变一下呢?比如下面的样式: 比起html默认的样式,上图这些 ...
- 论checkbox和radio的样式美化问题
如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对 ...
- checkbox和radio的样式美化问题
如果你下定决心要改变现有的默认的checkbox和radio的样式,那么我目前有两种办法: 1.自己动手写一个,也就是自己写代码实现将input的checkbox和radio默认的样式隐藏掉,使用绝对 ...
- 利用纯CSS美化checkbox和radio和滑动按钮的实现
W3C提供的CheckBox和radio的原始样式非常的丑,而且在不同的额浏览器表现还不一样,使用常规的方法添加样式没法进行修改样式 一, 单选按钮 <html> <head> ...
- 自定义表单样式之checkbox和radio
1,起因 最近在工作中要实现自定义式的radio样式,而我们通常使用的时默认的样式,因为自己实在想不到解决的方法,于是开始搜索,最终看到了不错的解决办法,可以完美解决我们遇到的问题. 2,原理 大家都 ...
- Css实现checkbox及radio样式自定义
前言 checkbox和radio样式自定义在网页中是很常见的, 比如在进行表单输入时性别的选择,用户注册时选择已阅读用户协议.随着用户对产品体验要求越来越高,我们都会对checkbox和radio重 ...
随机推荐
- JavaScript工具库之Lodash
你还在为JavaScript中的数据转换.匹配.查找等烦恼吗?一堆看似简单的foreach,却冗长无趣,可仍还在不停的repeat it!也许你已经用上了Underscore.js,不错,你已经进步很 ...
- 【开源】开发者新闻聚合APP 2.0.3发布（第二个稳定版本）
聚合了博客园新闻.infoq新闻.36kr新闻.oschina新闻.51cto新闻.csdn新闻: 争取做到随时刷随时有开发者的新闻! 目前还只支持安卓APP 但用的人多了,我会发布苹果版的APP 最 ...
- Windbg用法详解
工作空间 WinDBG的工作空间中保存了以下几种信息 调试会话状态: 包括断点,打开的源文件,用户定义的别名(alias)等. 调试器设置:包括符号文件路径,可执行映像文件路径,源文件路径,用I+/I ...
- iOS——自定义Segue实现总结
在阅读了iOS 8自定义动画转场上手指南后,刚开始不理解,后来慢慢消化了,现在总结如下: 1. 自定义Segue关键在于继承UIStoryboardSegue并重写perform方法 2. 动画可以在 ...
- hibernate继承（转）
http://justsee.iteye.com/blog/1070588 一.继承关系_整个继承树映射到一张表 对象模型(Java类结构) 一个类继承体系一张表(subclass)(表结构) Emp ...
- 说说设计模式~桥梁模式(Bridge)
返回目录 在软件系统中,某些类型由于自身的逻辑,它具有两个或多个维度的变化,那么如何应对这种“多维度的变化”?如何利用面向对象的技术来使得该类型能够轻松的沿着多个方向进行变化,而又不引入额外的复杂度? ...
- EF架构~XMLRepository仓储的实现
回到目录 对于数据仓储大家应该都很熟悉了,它一般由几个仓储规范和实现它的具体类组成,而仓储的接口与架构本身无关,对于仓储的实现,你可以选择linq2Sql,EF,Nosql,及XML 等等,之前我介绍 ...
- Atitit blend mode COLOR_DODGE 混合模式 “颜色减淡”模式
Atitit blend mode COLOR_DODGE 混合模式 "颜色减淡"模式 1.1. 混合模式是图像处理技术中的一个技术名词1 1.2. 目录1 1.3. 颜色减淡C ...
- iOS设备的越狱方法
最近公司的事情很忙,在开发一个类似于微信的App,经常加班,所以也没有时间去更新微信公众账号的内容了.iOSJailbreak, 申请这个账号大概有一个多月了吧,发布的内容不多,更多是针对开发者的内容 ...
- MyEclipse使用总结——MyEclipse10安装SVN插件
一.下载SVN插件subclipse 下载地址:http://subclipse.tigris.org/servlets/ProjectDocumentList?folderID=2240 在打开的网 ...