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

最新资讯
潘越飞:世上已无捷径,“重”才是时代关键词

潘越飞:世上已无捷径,“

重,是这一波经济周期的关键词,要干足苦活累活脏活。不再
macOS被曝新漏洞:黑客可直接绕开系统安全警告

macOS被曝新漏洞:黑客

一位著名Mac系统黑客刚刚开发了一种新攻击手段:可以在
万亿美元是苹果的巅峰?还是衰落的开始?

万亿美元是苹果的巅峰

在人工智能时代,如果横向对比美国的其他公司,不难发现苹
小米空调会凉吗?

小米空调会凉吗?

三天前已是立秋,夏天已过,小米空调会凉吗?
拆解网易游戏的百亿隐忧

拆解网易游戏的百亿隐

15年过去了,如今的百亿营收,和那时的网易游戏,那时丁磊的
上市,退市

上市,退市

历史可能已经证明了,一家公司活得长久与否,与规模、与上
最新文章
HTML如何在两个div标签中间画一条竖线

HTML如何在两个div标

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

多种实例解析HTML表单

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

Html+CSS绘制三角形图

这篇文章主要为大家详细介绍了Html+CSS绘制三角形图标
HTML的checkbox和radio样式美化的简单实例

HTML的checkbox和radi

下面小编就为大家带来一篇HTML的checkbox和radio样式
浅谈html标签的显示模式(块级标签,行内标签,行内块标签)

浅谈html标签的显示模

下面小编就为大家带来一篇浅谈html标签的显示模式(块
html+css3太阳系行星运转动画效果的实现代码

html+css3太阳系行星

下面小编就为大家带来一篇html+css3太阳系行星运转动