• 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; }
  • 相关阅读:
    将php中stat()得到的文件权限转成Linux形式
    Linux终端命令快捷键
    我的测试博客
    java 的反射机制- 代码讲解
    毕业有感
    COPD——团队项目测试心得
    慢阻肺疾病管理APP——第一次迭代心得
    团队项目需求心得——慢阻肺疾病管理APP
    合作和共赢的结对编程——中小学试卷生成器
    项目组队——欣赏与批判队友个人项目源码
  • 原文地址:https://www.cnblogs.com/mankii/p/11090541.html
Copyright © 2020-2023  润新知