input[type="radio"]自定義樣式

input爲radio時，雖然會有默認選中的樣式，可是並不符合大多數項目的需求，咱們的目標是能夠爲所欲爲自定義它的樣式。怎麼作呢？其實很簡單，只要抓住3點。分別是1.label 2.隱藏自帶樣式 3.繪製咱們的樣式。
首先，咱們準備了一個簡單的選中樣式，看圖：

下面咱們看看怎麼實現

1.label

咱們都知道，label能夠和input關聯，達到點擊label就觸發input的效果。
既然這樣，咱們就要充分的利用它。

<label for="cat" class="radio-box">
    <input type="radio" name="group" id="cat">
    <span class="radio-style">貓</span>
</label>
<label for="dog" class="radio-box">
    <input type="radio" name="group" id="dog">
    <span class="radio-style">狗</span>
</label>

看看這個簡單的結構，label裏面包了一個input和span,能夠想象，咱們的效果就是點擊label觸發input
咱們看一下效果

2.隱藏自帶樣式

如何隱藏自帶樣式呢？方法不少，這裏提供一種經常使用的寫法

input[type="radio"] {
    opacity: 0;
    width: 0;
    height: 0;
}

這樣咱們就看不到input自帶的醜陋選擇框了,再看一下效果，oh,yeah！消失了。

3.繪製本身的樣式

利用span標籤繪製本身的樣式

.radio-style::before {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid #d9d9d9;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    content: "";
}

input[type="radio"]:checked + .radio-style::before {
    padding: 4px;
    background-color: blue;
    background-clip: content-box;
    border-color: blue;
}

咱們利用僞元素，給它繪製一個圓圈，而後在選中狀態的時候，在改變它的樣式，從而達到第一張圖的效果。
如下是全部代碼的地址，歡迎查看

input-radio

固然以上是最簡單自定義樣式，咱們還能夠把它繪製成按鈕的形式，甚至是用圖片代替它。雖然這樣更加繁瑣，可是萬變不離其宗，只要掌握上面3點，你就能夠爲所欲爲修改它的樣式啦。