我的意思是，單選按鈕本身由一個圓形和一個位于中心的點組成（選擇該按鈕時）。我要更改的是兩者的顏色?？梢允褂肅SS完成嗎？
3 回答
HUH函數(shù)
TA貢獻1836條經(jīng)驗 獲得超4個贊
單選按鈕是特定于每個OS /瀏覽器的本機元素。除非您要實現(xiàn)自定義圖像或使用包含圖像的自定義Javascript庫（例如，此 - 緩存鏈接），否則無法更改其顏色/樣式。
侃侃無極
TA貢獻2051條經(jīng)驗 獲得超10個贊
一種快速的解決方法是使用來覆蓋單選按鈕的輸入樣式:after，但是創(chuàng)建自己的自定義工具箱可能是更好的做法。
input[type='radio']:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #d1d3d1;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
input[type='radio']:checked:after {
width: 15px;
height: 15px;
border-radius: 15px;
top: -2px;
left: -1px;
position: relative;
background-color: #ffa500;
content: '';
display: inline-block;
visibility: visible;
border: 2px solid white;
}
<input type='radio' name="gender"/>
<input type='radio' name="gender"/>
侃侃爾雅
TA貢獻1801條經(jīng)驗 獲得超16個贊
僅當您針對基于Webkit的瀏覽器（Chrome和Safari，也許您正在開發(fā)Chrome WebApp，知道...）時，才可以使用以下代碼：
input[type='radio'] {
-webkit-appearance: none;
}
然后對其進行樣式設(shè)置，就好像它是一個簡單的HTML元素一樣，例如應用背景圖像。
使用input[type='radio']:active當選擇輸入，以提供交替的圖形
更新：從2018年開始，您可以添加以下內(nèi)容以支持多個瀏覽器供應商：
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
添加回答
舉報
0/150
提交
取消