1. 程式人生 > >改變radio/checkbox樣式

改變radio/checkbox樣式

pre 得到 select light AC inpu item OS checked

直接上代碼

.item input[type="radio" ] {
        width: 20px;
        height: 20px;
        background: #fff;
        -webkit-appearance: none;
        border: 1px solid #999;
    }
    
    .item input[type="radio" ]:checked {
        background:url("../img/select.png");
        background-size: cover;
    }

得到的結果就是radio的樣式由圓形改為了正方形,被選中打勾。

checkbox同理。

起重要作用的就是-webkit-appearance: none,默認樣式清除,然後就可以自己需要設置了。

改變radio/checkbox樣式