IFE糯米學院-checkbox和radio樣式的美化實現

Lalala這是我的小馬甲哦發表於2017-02-26

對rdio和checkbox實現如下樣式的美化

github地址

//html部分
<body>
    <p>這是一組radio按鈕</p>
    <section>
        <input type="radio" name="radio" id="radio1">
        <label for="radio1"></label> <br/>
        <input type="radio" name="radio" id="radio2">
        <label for="radio2"></label>
    </section>
</body>

思路一

input[type=”radio”]是可以通過了label繫結的，即點選label同樣可以選中radio
1.先隱藏radio本身，用label佔位，並把label 的背景設定為初始狀態。
2.通過input的checked狀態，重新background-position的值

input[type="radio"] {
    display: none;
}
label {
    width: 16px;
    height: 16px;
    display: inline-block;
    background-image: url("img.png");
    background-repeat: no-repeat;
    background-position: -24px -10px;

    cursor: pointer;
}

input:checked + label{
     background-position: -59px -10px;
}

ps:這個的實現不是很難，但是我覺得最難得是，不是太懂ps的情況下，也不用有一些測量畫素工具的情況下，我一直在嘗試position 的具體值，然後，總結了一點點tips：
1. 把label設定為和背景圖片一樣的大小
2. 用ps測定出第一個預設狀態定位的具體距離，我用的ps的畫框工具，太初級了吧，哈哈哈，比如，這裡就測出離頂部10px，左邊24px
3. 然後設定position（是負值哦），background-position: -24px -10px;
4. 再把label的大小變成一個圖示的大小 width: 16px;height: 16px;

思路二

因為如果把label設定為了radio的位置，那麼就失去了label和input可以繫結的這個特性
所以我的思考是，用label的before元素來實現radio的佔位，然後label依舊是我們的那個label

在label標籤裡面可以新增內容

input[type="radio"]{
    display: none;
}
label:before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("img.png");
    background-repeat: no-repeat;
    background-position: -24px -10px;

    cursor: pointer;
}

input:checked + label:before{
    background-position: -59px -10px;
}

ps：圓圈圈和文字咩有對齊，這個可以自行調整

checkbox實現，用的思路二

//html
<section class="checkbox">
    <input type="checkbox" name="checkbox" id="check1" checked>
    <label for="check1"> 蘋果</label><br/>
    <input type="checkbox" name="checkbox" id="check2">
    <label for="check2"> 香蕉</label><br/>
    <input type="checkbox" name="checkbox" id="check3">
    <label for="check3"> 葡萄</label>
</section>
input[type="checkbox"]{
    display: none;
}
.checkbox label:before{
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("img.png");
    background-repeat: no-repeat;
    background-position: -24px -32px;

    cursor: pointer;
}
.checkbox input:checked + label:before{
    background-position: -59px -32px;
}

其實是和radio一樣的實現方式，所以，可以用scss優化一下

相關文章