用css實現手機端單選框的樣式改變

2021-07-23 20:13:17 字數 611 閱讀 4674

在手機端預設單選框是沒有樣式的,要讓單選框顯示自定義的樣式可以用css來實現:

看demo

class="choice">選擇li>

男label>

type="radio"

name="***"

value="男">

li>

女label>

type="radio"

name="***"

value="女">

li>

ul>

css中這樣設定

.***

liinput

.***

liinput

[type='radio']

:checked

.***

liinput

[type='radio']

:checked

:after

.***是ul外面的父級的名字,這裡沒有貼出

.*** li input[type=』radio』]:checked:after是單選框被選中後的後面使用的樣式

改變單選框radio的樣式

先附上效果圖 具體實現步驟 在input標籤後面新增乙個span標籤用來改變樣式 將input的display設定為none,然後寫span的樣式作為radio的未選中樣式 panel radio1,panel radio2,panel radio3 panel radioinput 使用after...

純css設定單選框 進度條樣式

1.設定radio樣式 注意 radio的id要和對應的label 的for相同。原理 使用 checked label 切換樣式。checkbox也可以這麼做。css input type radio label l1 l2 r1 checked label r2 checked label ht...

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

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