設(shè)計(jì)師眼中的頁面總是充滿美感的，但當(dāng)一個充滿美感的設(shè)計(jì)圖放在程序員眼前時(shí)，情形會大為不同。我們會考慮，這個設(shè)計(jì)應(yīng)該怎么實(shí)現(xiàn)，難度如何，等等等。在不斷的撕逼中，我們嘗試著以用戶的角度去考慮問題。畢竟，他們高興就好_{_}。

先看一下單選按鈕的設(shè)計(jì)圖：

我是美麗的單選按鈕

之前嘗試過直接用css對單選按鈕進(jìn)行修改，可是基本不可能修改為以上樣式。于是，改用其他元素代替。當(dāng)改用其他元素代替后，我們又會考慮一個問題。能否繼續(xù)使用原生radio的選中邏輯？或者用js來模擬選中邏輯？就這樣，樣式的問題擴(kuò)展為一個比較復(fù)雜的交互處理問題。但是，我們的原則是，能用簡單的方式就絕對不用復(fù)雜的方式。在css3選擇器的幫助下，我們確實(shí)可以只用css實(shí)現(xiàn)上述效果。

頁面dom結(jié)構(gòu)

<label class="m-check ui-margin">
     <input type="radio" name="remindType" value="2" v-model="remind"/>
     <div class="m-radio ui-pos"></div>
     <span>天</span>
</label>

整個結(jié)構(gòu)包含在label標(biāo)簽里，以擴(kuò)大radio的選中范圍。雖然在用一個div來模擬radio的樣式，但是仍然需要input來幫忙實(shí)現(xiàn)選中時(shí)的樣式效果，而重點(diǎn)也就在這里。

css代碼

.ui-middle{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.m-radio{
    display: inline-block;
    position: relative;
    width: 20px;
    height: 20px;
    border: solid 1px #ccc;
    border-radius: 50%;
    cursor: pointer;
    }
.m-radio:after{
    .ui-middle;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
}
.m-check{
    display: inline-block;
}
.m-check input[type="radio"]{
    display: none;
}
.m-check input[type="radio"]:checked + div{
    border:solid 2px #60A3F5;
}
.m-check input[type="radio"]:checked + div:after{
    background-color: #60A3F5;
}

首先，將input標(biāo)簽隱藏，然后將div標(biāo)簽的樣式修改為設(shè)計(jì)圖中的按鈕樣式，其中的實(shí)心點(diǎn)，則用偽元素實(shí)現(xiàn)，并讓偽元素在父元素中絕對居中。

接下來是選中邏輯的實(shí)現(xiàn)，當(dāng)點(diǎn)擊label標(biāo)簽時(shí)，隱藏的input標(biāo)簽被選中，其狀態(tài)發(fā)生改變。狀態(tài)用偽類選擇器選中。這個時(shí)候，用兄弟選擇器選中的div的樣式發(fā)生改變，就實(shí)現(xiàn)了選中效果。

總結(jié)：為了讓隱藏的input標(biāo)簽被選中，使用label將其包裹。用偽類選擇器和相鄰元素選擇器實(shí)現(xiàn)div樣式的修改。