使用css實現單選框/複選框特效

系統默認的單選按鈕和多選按鈕總是不符合我們對審美的要求，爲了優化用戶體驗與視覺效果，我們往往會做出一些好看的單選/多選按鈕，步驟超詳細，資源圖片免費分享：

效果圖：

思路： 首先去掉系統默認的按鈕樣式，然後自己設置新的樣式，可用背景圖實現，設置選中效果！！ 

 

1. 首先寫四個單選框：

單選框，類型爲radio，同一組的單選框，必須name值一致，id用於與label的for屬性關聯，value必寫，會被髮送到服務器。

    <form class="radioStyle">
        你最喜歡哪個季節？(radio單選) 

        <input type="radio" name="season" id="spring" value="spring">
        <label for="spring">
            春季
        </label>
    
        <input type="radio" name="season" id="summer" value="summer">
        <label for="summer">
            夏季
        </label>

        <input type="radio" name="season" id="autumn" value="autumn">
        <label for="autumn">
            秋季
        </label>

        <input type="radio" name="season" id="winter" value="winter">
        <label for="winter">
            冬季
        </label>
    </form>

第一步的效果圖：

2.  去掉原有的input樣式：

input的選中框爲空心圓，現在去掉該樣式，自己設置新樣式！

去掉form下的input表單默認樣式：

.radioStyle input {
    display: none;
}

第二步效果圖：

3. 設置自定義樣式：

input默認樣式已經去掉了，只剩下文字部分了，而文字部分是包含在label標籤當中的，所以要爲label標籤設置樣式：

給label加邊框線，爲了美觀，設置內邊距，設置最大寬度，文字居中，圓角border-radius（css3屬性，所以要適配不同瀏覽器）: 

.radioStyle label {
    border: 1px solid skyblue;
    padding: 2px 20px;
    line-height: 28px;
    min-width: 80px;
    text-align: center;
    margin: 5px;
    border-radius: 5px;
    -webkit-border-radius: 5px;    //谷歌瀏覽器
    -moz-border-radius: 5px;        //火狐瀏覽器
    -ms-border-radius: 5px;           //IE瀏覽器
    -o-border-radius: 5px;            //opera瀏覽器
}    

第三步效果圖：

 四：設置鼠標選中效果

我們在點擊的時候，需要有選中效果，接下來我們設置鼠標選中單選框時的效果：

知識要點：

需要用:checked選擇器（表示選中）：

我們要設置的是：input後面的label元素的選中效果（:checked）

“+”表示相鄰兄弟選擇器:如果需要選擇緊接在另一個元素後的元素，而且二者有相同的父元素，則可使用；

爲選中時的label設置背景圖，不重複，靠右靠下，尺寸爲 21px*21px;

.radioStyle input:checked+label {
    color: #000;
    background: url(../imgs/checked.svg) no-repeat right bottom/21px 21px;
}

最終效果圖：

 

最後呢，如果有想要按鈕背景原圖的小夥伴，本人附上百度網盤鏈接免費分享：

鏈接：https://pan.baidu.com/s/1jqx4e11LNS6hMr8NLTd5Wg 
提取碼：kc8e