自定義checkbox， radio樣式

17.2.25、nimil

今天開始做百度前端學院的任務，第一個是自定義checkbox， radio樣式。

checkbox和radio兩個標簽是不可以改變樣式的，background-color、border等屬性都對其無效。

 

但是本身的樣式又不太美觀：

本身的radio外觀；本身的checkedbox外觀。

不能改樣式，卻又如此的不美觀，實在不符合我們現在的審美和需求。

這是百度給的一個樣式圖片：

首先，HTML：

    <div>
        <input type="radio" name="one" id="radio2" >
        <label for="radio2" class="radioOne after radioLabel1"></label>
        <input type="radio" name="one" id="radio" >
        <label for="radio" class="radioOne after radioLabel" ></label><!-- 兩個radio -->

        <input type="checkbox" name="two" id="checkbox" >
        <label for="checkbox" class="checkboxLabel after"></label>
    </div>

那么，如何改變樣式呢。label標簽的for屬性，為radiol加上對應的id，就可以實現點擊label的時候，對應dadio被選中。

本次使用到了background-img、background-position、checked選擇器、

首先隱藏input標簽、並為label統一加上背景圖：

   input{
       display: none;/*隱藏input*/
   }

　　label{
　　　　background: url(img/spread.png);background-repeat: no-repeat;
　　}　　/*為label統一加上背景圖：*/

　　.after{
　　　　width: 30px;height: 25px;display: block;/*設置label樣式*/
　　}/*定義所有label初始樣式*/

　　為每個標簽定位背景圖，采用了雪碧圖方法：

      CSS Sprite、CSS雪碧圖應用實例

        .radioLabel{
            background-position: 26% 15%;
        }
        .checkboxLabel{
            background-position: 26% 113%;
        }

 

　　在radio被選中后，改變對應label的樣式。這里用到了css選擇器：checked。

        #radio2:checked ~ .radioLabel1{
            background-position: 75% 15%;
        }
        #radio:checked ~ .radioLabel{
            background-position: 75% 15%;
        }
        #checkbox:checked ~ .checkboxLabel{
            background-position: 75% 113%;
        }

　　這時會出現一個問題，我試了很多次才發現問題處在什么地方。

　　

　　如圖中的1、2，我的label寫在對應input下方，如果寫在上面，checked選擇器是查不到的。上面的css也不會起作用。

　　以上。