自定義checkbox， radio樣式

17.2.2五、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%;
        }

　　這時會出現一個問題，我試了不少次才發現問題處在什麼地方。

　　

　　如圖中的一、2，個人label寫在對應input下方，若是寫在上面，checked選擇器是查不到的。上面的css也不會起做用。

　　以上。