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

北辰狼月發表於2018-06-05

input為radio時，雖然會有預設選中的樣式，但是並不符合大多數專案的需求，我們的目標是可以隨心所欲自定義它的樣式。怎麼做呢？其實很簡單，只要抓住3點。分別是1.label 2.隱藏自帶樣式 3.繪製我們的樣式。
首先，我們準備了一個簡單的選中樣式，看圖：

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

下面我們看看怎麼實現

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
我們看一下效果

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

2.隱藏自帶樣式

如何隱藏自帶樣式呢？方法很多，這裡提供一種常用的寫法

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

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

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

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點，你就可以隨心所欲修改它的樣式啦。

相關文章