CSS设置input默认样式

最新推荐文章于 2024-01-05 00:15:00 发布

weixin_30611509

最新推荐文章于 2024-01-05 00:15:00 发布

阅读量449

点赞数

原文链接：http://www.cnblogs.com/xueyunNO1/p/9487537.html

版权

HTML

    <ul class="box">
        <li>
            <input type="checkbox" name="vehicle" id="vehicle">
            <label for="vehicle">第一个选项</label>
        </li>
        <li>
            <input type="checkbox" name="vehicle" id="vehicle2">
            <label for="vehicle2">第二个选项</label>
        </li>
    </ul>

CSS

    ul,
    li {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .box input[type="checkbox"] {
        width: 12px;
        height: 12px;
        border: 1px solid #e2e2e2;
        background: none;
        box-shadow: none;
    }

    .box input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        display: inline-block;
        margin: 0 2px 2px 0;
        width: 12px;
        height: 12px;
        cursor: pointer;
        outline: none;
        vertical-align: middle;
        border: 1px solid #e2e2e2;
    }

    .box input:checked {
        border: 1px solid #13af13;
    }
    .box input:checked::before {
        content: "";
        display: block;
        position: relative;
        width: 3px;
        height: 6px;
        left: 34%;
        top: 9%;
        border-right: 1px solid #13af13;
        border-bottom: 1px solid #13af13;
        transform: rotate(45deg);
        background: none;
    }