改變單選框radio的樣式

2021-09-26 01:35:28 字數 996 閱讀 5904

先附上效果圖:

具體實現步驟:

在input標籤後面新增乙個span標籤用來改變樣式

將input的display設定為none,然後寫span的樣式作為radio的未選中樣式

#panel #radio1,#panel #radio2,#panel #radio3

#panel .radioinput

使用after偽類,寫radio選中時的樣式

#panel .radio-type:checked + .radioinput:after

#panel .radio-type:checked + .radioinput

最後附上全部**:

html部分:

您想先做什麼?

完成發布**

整套房子

整套房子

下一步

css部分:

.panel-title

#panel

#panel #radio1,#panel #radio2,#panel #radio3

#panel .radioinput

#panel .radio-type:checked + .radioinput:after

#panel .radio-type:checked + .radioinput

#panel img

#panel .con

#panel .panel-title1

#panel .panel-title~div,#panel .panel-title1~div

#panel button

HTML中的單選框 radio

在開始學習radio的用法的時候,覺得很簡單,但在用的時候,卻不知道怎麼進行單選,後來查了很長時間才明白其中的道理,其中,name的值是要相等的,這裡的值是什麼值都可以,只要相等就行 男 女在用的時候,也發現了另外乙個問題,就是在value沒有賦值的時候,也可以使用,於是查詢了下value,對於va...

判斷radio單選框是否選中

1 利用獲取選中值判斷選中 判斷radio是否有選中,獲取選中的值 varval input radio name checked val if val null else2 使用checked屬性判斷選中 radio不能用 checked 相等來判斷,只用用true來判斷 if this attr...

表單介面 改變單選框和核取方塊的樣式

input span before span after label abc checked span after efg checked span after 我最帥 你不帥注 1.兩個單選框name設為相同,代表這兩個單選框為乙個組別,即只能選中乙個 2.為選擇器,代表選擇某元素下的所有要選擇的...