下面小编就为大家带来一篇HTML的checkbox和radio样式美化的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

HTML的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样式美化的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持爱安网。

原文地址:http://www.cnblogs.com/shouce/archive/2016/06/08/5569173.html

最新资讯
“阿里离职女高管”发表公开信 呼吁马云评评理

“阿里离职女高管”发

阿里蚂蚁金服陈亮朋友圈 日前,一篇《那个从阿里离职的
巨头春节红包“撒币”:格局已变 红利何在

巨头春节红包“撒币”

自五年前微信借助春节红包拿下改变移动支付格局的关键
直击|荣耀小米高管再开撕 这次是因为TOF相机

直击|荣耀小米高管再

针对小米高管卢伟冰对荣耀V20 TOF相机的质疑,荣耀业务
分析师:苹果CEO库克的最大错误是没收购Netflix

分析师:苹果CEO库克的

美国投行Wedbush证券研究部门董事总经理丹尼尔·艾夫
南华早报:腾讯在与艺电洽谈将Apex Legends引进中国

南华早报:腾讯在与艺电

据《南华早报》援引不具名知情人士报道称,腾讯控股正与
路透:三星电子正加大对电信网络设备业务投入

路透:三星电子正加大对

路透社今日报道称,据三星电子高管和其他行业高管称,在华
最新文章
HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

HTML实现2列布局(左侧

这篇文章主要介绍了HTML实现2列布局(左侧宽度固定,右侧
Html读取本地文件夹下图片并显示的示例代码

Html读取本地文件夹下

这篇文章主要介绍了Html读取本地文件夹下图片并显示的
详解 html area标签

详解 html area标签

area 元素总是嵌套在 <map> 标签中。本文重点给大家介
HTML中两个tabs导航冲突问题的解决方法

HTML中两个tabs导航冲

这篇文章主要介绍了HTML中两个tabs导航冲突问题的解决
详解前端在html页面之间传递参数的方法

详解前端在html页面之

这篇文章主要介绍了详解前端在html页面之间传递参数的
详解HTML onfocus获得焦点和onblur失去焦点事件

详解HTML onfocus获得

这篇文章主要介绍了详解HTML onfocus获得焦点和onblur