laber美化表单小技巧

来源：互联网发布：62数据脚本源码编辑：程序博客网时间：2024/05/01 16:29
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title></head><style>    .drag ul li,    .dragg ul li {        width: 100%;        height: 60px;        list-style-type: none;    }    .drag ul li label,    .dragg ul li label {        width: 30px;        height: 30px;        display: inline-flex;        background: #f2f2f2;        border: 1px solid #d8d8d8;        border-radius: 4px;    }    .drag ul li input[type="checkbox"],    .dragg ul li input[type="checkbox"] {        display: none;    }    .drag ul li input[type="checkbox"] + b,    .dragg ul li input[type="checkbox"] + label b {        display: inline-block;        width: 30px;        height: 30px;        vertical-align: middle;        cursor: pointer;    }    .drag ul li input[type="checkbox"]:checked + b,    .dragg ul li input[type="checkbox"]:checked + label b {        background: url("../images/check_icon.png") no-repeat center center;        background-size: 96% auto;    }    .testContent {        width: 100%;        clear: both;        height: 200px;        box-sizing: border-box;    }    .testContent ul {        margin: 0 auto;        padding: 0;        width: 80%;    }    .testContent ul:nth-child(1) {        display: block;    }    .testContent ul:nth-child(2) {        display: none;    }    .testContent ul:nth-child(3) {        display: none;    }    .testContent ul li {        font-size: 0.95em;        width: 100%;        height: 33px;        list-style-type: none;        box-sizing: border-box;        padding-left: 10px;    }    .testContent ul li b {        width: 15px;        height: 15px;        border: 1px solid #f95f05;        display: list-item;        border-radius: 10px;        float: left;        text-align: center;    }    .testContent ul li span {        float: left;        box-sizing: border-box;        padding-left: 10px;        margin-top: -1px;    }    .testContent ul li b input {        outline: none;        width: 11px;        height: 11px;        overflow: hidden;        border-radius: 10px;        margin-bottom: 2px;    }    .option-input {        -webkit-appearance: none;        border: none;    }    .option-input:checked {        background: #f95f05;    }</style><body><div class="drag">    <!--隐式运用实现多个复选框，主要在选项多时-->    <form>        <ul>            <li><label><input type="checkbox" checked="true"><b></b></label></li>            <li><label><input type="checkbox"><b></b></label></li>            <li><label><input type="checkbox"><b></b></label></li>            <li><label><input type="checkbox" checked="true"><b></b></label></li>        </ul>    </form></div><div class="dragg">    <!--运用laber for实现复选样式美化 这一定要绑定id和for-->    <form>        <ul>            <li>                <input type="checkbox" id="check" checked="true">                <label for="check"><b></b></label>            </li>        </ul>    </form></div><!--运用laber 实现radio--><div class="testContent">    <form>        <ul>            <li><label><b><input name="age" type="radio" class="option-input" value="A"></b><span>30岁以下</span></label>            </li>            <li><label><b><input name="age" type="radio" class="option-input" value="B"></b><span>30-50岁</span></label>            </li>            <li><label><b><input name="age" type="radio" class="option-input" value="C"></b><span>50岁以上</span></label>            </li>        </ul>    </form></div></body></html>
0 0