首頁 > web前端 > css教學 > 利用css3更改input單選和多選樣式的方法

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

高洛峰
發布: 2017-03-15 11:32:08
原創
1415 人瀏覽過

在專案開發中我們常常會遇到需要更改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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板