网站首页杂项

html单选、多选勾选样式

发布时间：2018-07-03编辑：Cary.He

/********选择框勾选效果样式 start ********/

.inbox-page input.checkbox {

    margin: 13px 0 0;

}

.inbox-page .checkbox {

    position: relative;

    top: -3px;

    margin: 0 1rem 0 0;

    cursor: pointer;

}

.inbox-page .checkbox:before {

    -webkit-transition: all 0.3s ease-in-out;

    -moz-transition: all 0.3s ease-in-out;

    transition: all 0.3s ease-in-out;

    content: "";

    position: absolute;

    left: 0;

    z-index: 1;

    width: 15px;

    height: 15px;

    border: 1px solid #A0A0A0;

}

.inbox-page .checkbox:after {

    content: "";

    position: absolute;

    top: -0.125rem;

    left: 0;

    width: 1.1rem;

    height: 1.1rem;

    background: #fff;

    cursor: pointer;

}

.inbox-page .checkbox:checked:before {

    -webkit-transform: rotate(-45deg);

    -moz-transform: rotate(-45deg);

    -ms-transform: rotate(-45deg);

    -o-transform: rotate(-45deg);

    transform: rotate(-45deg);

    height: .4rem;

    width: .8rem;

    border-color: #4F52BA;

    border-top-style: none;

    border-right-style: none;

    border-width: 2px;

}

/********选择框勾选效果样式 end ********/




<label for="kl" class="poin inbox-page">

    <div class="mail "> <input type="checkbox" name="uid[]" value="" id="kl" class="checkbox"> </div>

    <div class="mail "> <input type="checkbox" name="uid[]" value="" id="kl" class="checkbox"> </div>

    <div class="mail "> <input type="radio" name="rid" value="" id="vi" class="checkbox"> </div>

    <div class="mail "> <h6>勾选</h6> </div>

</label>




效果展示：