如何使用CSS3實(shí)現(xiàn)input多選框自定義樣式

小編給大家分享一下如何使用CSS3實(shí)現(xiàn)input多選框自定義樣式，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

原理：首先把input元素隱藏掉，然后用CSS設(shè)置label元素（其他元素也可以）的樣式，選中時(shí)的樣式使用input:check+label選中l(wèi)abel，無須使用圖片和JS

效果預(yù)覽

html代碼

 <div class="radio">
    <input type="checkbox" id="sex1">
    <label for="sex1"></label>
    男
</div>
<div class="radio">
    <input type="checkbox" id="sex2">
    <label for="sex2"></label> 女
</div>

CSS代碼

.radio {
    position: relative;
    display: inline-block;
    margin-right: 12px;
}

.radio input {
    width: 15px;
    height: 15px;
    appearance: none;/*清楚默認(rèn)樣式*/
    -webkit-appearance: none;
    opacity: 0;
    outline: none;
    z-index: 8; /*讓input層級(jí)高于label，使之能選中*/
    
}

.radio label {
    position: absolute;
    left: 0;
    top: 6px;
    width: 15px;
    height: 15px;
    border: 1px solid #3582E9;
}

.radio input:checked+label::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0px;
    /* 這里顯示矩形的一半邊框再旋轉(zhuǎn)45度來實(shí)現(xiàn)對(duì)勾樣式 */
    width: 5px;
    height: 12px;
    border-right: 1px solid #000000;
    border-bottom: 1px solid #000000;
    transform: rotate(45deg);
}

看完了這篇文章，相信你對(duì)“如何使用CSS3實(shí)現(xiàn)input多選框自定義樣式”有了一定的了解，如果想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！