• 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; }
  • 相关阅读:
    vue this.$refs 获取的值为undefined?
    如何调用 vuex
    git 更新远程分支列表
    wordpress 支持上传中文名称文件
    wordpress 修改默认分页条数
    wordpress 不用插件添加友情链接
    wordpress 代码获得菜单的方法
    wordpress 添加友情链接
    【转】 WordPress数据库及各表结构分析
    WordPress 安装教程
  • 原文地址:https://www.cnblogs.com/mankii/p/11090541.html
Copyright © 2020-2023  润新知