css更改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></p>

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就是多選的啦。

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