css3更改input單選和多選的樣式

在項目開發中我們經常會遇到需要更改input單選和多選樣式的情況，今天就給大家介紹一種簡單改變input單選和多選樣式的辦法。

在這之前先簡單介紹一下:before偽類

:before 選擇器向選定的元素前插入內容。使用content 屬性來指定要插入的內容（content是必須的哦）。

相信這並不難以理解，接下來我們先理解思路：

（1）首先在html用label為 input 元素定義標記，也就是當你點擊label標簽時相應的input也會選中或取消

（2）接下來就是寫css了，將input隱藏，只需要在label之前加入你的樣式就好了，可以是圖片也可以是自己畫的圓圈，下麵的這個例子是我寫的圓，當然也可以替換成背景圖。

input[type="radio"]+label:before是未選中狀態的樣式

input[type="radio"]:checked+label:before是選中狀態的樣式

<input type="radio" id="nationality1"><label for="nationality1">中國</label></div>

input[type="radio"]{
    display:none;
}
input[type="radio"]+label{
    position: relative;
}
input[type="radio"]+label:before{
    content: "";
    width:25px;
    height:25px;
    background: #ffffff;
    border:2px solid $gray;
    position: absolute;
    bottom:3px;
    left: -35px;
    border-radius: 50%;
}                                                   
input[type="radio"]:checked+label:before{
    content: "";
    width: 25px;
    height: 25px;
    background: #34c0f5;
    position: absolute;
    bottom:3px;
    left: -35px;
    z-index: 99;
    border-radius: 50%;
}                            

把radio替換成checkbox就是多選的啦。

註：隱藏和偽類定位是關鍵