zoukankan      html  css  js  c++  java
  • CSS3美化复选框checkbox

    效果

    HTML

    <div class="check-wrap">
        <input type="checkbox" class="icheck" id="checkbox1" name="check" value="1" checked/>
        <label for="checkbox1" class="ilabel"></label>文字1
    </div>
    <div class="check-wrap">
        <input type="checkbox" class="icheck" id="checkbox2" name="check" value="2"/>
        <label for="checkbox2" class="ilabel"></label>文字2
    </div>
    <div class="check-wrap">
        <input type="checkbox" class="icheck" id="checkbox3" name="check" value="3"/>
        <label for="checkbox3" class="ilabel"></label>文字3
    </div>

    * 注意input的id和label的for必须一致

    CSS

    .check-wrap { position: relative; display: inline-block; vertical-align: middle; height: 24px; padding-left: 13px; line-height: 24px; font-size: 16px;color:#444444;}
    .check-wrap~.check-wrap{
        margin-left: 10px;
    }
    .check-wrap > .icheck { opacity: 0; }
    .check-wrap > .ilabel { border-radius: 3px; cursor: pointer; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
    .check-wrap > .ilabel:after {content: " ";border: 1px solid #999;display: block;font-weight: bold;text-align: center;border-radius: 3px;width: 22px;height: 22px;line-height: 22px;}
    .check-wrap > .icheck:checked + .ilabel:after {content: "✓";border-color: #999;background-color: #fff;color: #3ad045;}
    .check-wrap > .icheck:indeterminate + .ilabel:after { content: "■"; color: #3f51b5; background-color: #FFF; border-color: #3f51b5; }
  • 相关阅读:
    企业大数据战略规划高级培训课程
    大数据工具篇之flume1.4-安装部署指南
    大数据工具篇之Hive与MySQL整合完整教程
    通用网络信息采集器(爬虫)设计方案
    大数据导论之为何需要引入大数据
    招募贴:Hadoop专业解决方案招募义务翻译人员
    Hadoop文件系统支持释疑之S3
    [转]WPF入口Application
    Host 'XXX' is not allowed to connect to this MySQL server 解决方案/如何开启MySQL的远程帐号
    Linq To EF (添加记录后获取添加的自增ID和叫“ID”的列不是自增列不让插入的问题)
  • 原文地址:https://www.cnblogs.com/mankii/p/11090541.html
Copyright © 2011-2022 走看看