利用css3更改input單選和多選樣式的方法

在專案開發中我們常常會遇到需要更改input單選和多選樣式的情況，今天就跟大家介紹一個簡單改變input單選和多選樣式的方法。

在這之前先簡單介紹一下:before偽類別

#:before 選擇器向選定的元素前插入內容。使用content 屬性來指定要插入的內容（content是必須的）。

相信這並不難以理解，接下來我們先理解思路：

（1）首先在html用label為input 元素定義標記，也就是當你點擊label標籤時對應的input也會選取或取消

（2）接下來就是寫css了，將input隱藏，只需要在label之前加入你的樣式就好了，可以是圖片也可以是自己畫的圓圈，下面的例子是我寫的圓，當然也可以替換成背景圖。

input[type="radio"]+label:before是未选中状态的样式

input[type="radio"]:checked+label:before是选中状态的样式

<input type="radio" id="nationality1"><label for="nationality1">中国</label></p>

{:;
}{:;
}{:;:;:;:;:;:;:;:;:;
}{:;:;:;:;:;:;:;:;:;
}

把radio替換成checkbox就是多選的啦。

註：隱藏與偽類定位是關鍵

以上是利用css3更改input單選和多選樣式的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！