登录  /  注册
HTML的checkbox和radio的美化
php中文网
发布: 2016-06-10 15:03:13
原创
682人浏览过

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>
登录后复制
复制代码

效果图:

来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门推荐
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 技术文章
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2023 //m.sbmmt.com/ All Rights Reserved | 苏州跃动光标网络科技有限公司 | 苏ICP备2020058653号-1

 | 本站CDN由 数掘科技 提供

登录PHP中文网,和优秀的人一起学习!
全站2000+教程免费学