在項目開發(fā)中我們經(jīng)常會遇到需要更改input單選和多選樣式的情況，今天就給大家介紹一種簡單改變input單選和多選樣式的辦法。

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

:before 選擇器向選定的元素前插入內(nèi)容。使用content 屬性來指定要插入的內(nèi)容(content是必須的哦)。

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

(1)首先在html用label為 input 元素定義標記，也就是當你點擊label標簽時相應(yīng)的input也會選中或取消

(2)接下來就是寫css了，將input隱藏，只需要在label之前加入你的樣式就好了，可以是圖片也可以是自己畫的圓圈，下面的這個例子是我寫的圓，當然也可以替換成背景圖。input[type="radio"]+label:before是未選中狀態(tài)的樣式input[type="radio"]:checked+label:before是選中狀態(tài)的樣式

中國

{:;

}{:;

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

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

}

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

注：隱藏和偽類定位是關(guān)鍵

總結(jié)

以上是生活随笔為你收集整理的php input多选,利用css3更改input单选和多选样式的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。