下面小编就为大家带来一篇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

最新资讯
网易考拉销售额78分钟破去年双十一 26分钟送达首单

网易考拉销售额78分钟

据网易考拉双十一销售数据显示,开场过去3分49秒,网易考
直击|天猫“分钟级配送”渐成常态:30分钟多城已送达

直击|天猫“分钟级配

2018年天猫双11开场仅30分钟,全国多地消费者就收到了刚
直击|2018天猫双11狂欢夜覆盖观众超2.4亿人

直击|2018天猫双11狂

10日晚,2018天猫双11狂欢夜(以下简称“猫晚”)在上海举行
80万口碑用户双11凌晨购买线下消费套餐 交易增18倍

80万口碑用户双11凌晨

本地生活服务平台口碑App的数据显示,双11开始后的前30
直击|苏宁易购总裁发战报:4秒破1亿 50秒破10亿

直击|苏宁易购总裁发

双11电商大促正式拉开序幕。苏宁易购侯恩龙宣布,苏宁数
饿了么:18-21点订单量同比去年增幅46%

饿了么:18-21点订单量

阿里本地生活服务公司今年首次参加天猫双11,饿了么公布
最新文章
HTML中两个tabs导航冲突问题的解决方法

HTML中两个tabs导航冲

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

详解前端在html页面之

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

详解HTML onfocus获得

这篇文章主要介绍了详解HTML onfocus获得焦点和onblur
HTML如何在两个div标签中间画一条竖线

HTML如何在两个div标

最近项目经理交小编一个活儿,需要在界面当中画一条竖线
多种实例解析HTML表单form的使用方法

多种实例解析HTML表单

这篇文章主要以多种实例的方式帮助大家了解分析HTML表
Html+CSS绘制三角形图标

Html+CSS绘制三角形图

这篇文章主要为大家详细介绍了Html+CSS绘制三角形图标