修改radio和checkbox的預設樣式

2021-08-05 19:30:11 字數 757 閱讀 7690

html5內建的input type='radio'和type='checkbox'單選和核取方塊是比較醜的,基本上遇到產品經理,是鐵定過不去的,大多數的時候我們可以直接寫自定義樣式表,來替換input,不用input,通過jquery來控制dom,來模擬乙個單選和複選的按鈕功能:

例如:

.cbx

.cbxgreen-cur

用這樣的樣式替換掉input的使用,達到控制單選和複選樣式的問題。

但是這種方式有很多的弊端,他是專門為jquery的dom而生的一種做法方式,如果換做vue,就完全不適合:

接下來我們需要修改input的預設樣式,直接把input的預設樣式修改為我們需要的樣式就ok了:

html如下:

css如下:

.banklist input[type="radio"] 

/* input:checked

input:active */

.banklist input[type="radio"],

.banklist input[type="radio"]:active

.banklist input[type="radio"]:checked

input:checked ~ input,

input:checked ~ input:active

純CSS3美化radio和checkbox

當然,雖然說不能相容,但是對於為什麼不能相容還是需要解釋一下的,其關鍵在於這麼個選擇器的問題 input type radio before。beofre這個偽類選擇器在主流瀏覽器中可以在p,span,div等標籤插入一些式樣,但是在input中就不行,索性chrome支援這一特性,而本例項也正是圍...

jquery和js如何判斷checkbox是否選中

jquery input type checkbox attr value 返回結果 501 input type checkbox is checked 返回結果 選中 true,未選中 false js if document.getelementbyid checkboxid checked ...

關於radio 修改樣式問題

谷歌下 頁面和css如下 test label test radio checked name fruit type radio value 01 id qy test radioinput onclick qy 企業 test label test radio name fruit type ra...