css背景單選按鈕

我想將背景顏色設置爲單選按鈕而不是使用圖像。我試着用複選框，它的工作。我可以嘗試類似的代碼單選按鈕也適用於所有瀏覽器？就像在各個端點上添加曲線都只是一個想法。請建議My fiddle is here css背景單選按鈕

<div style="width:10px;height:10px;" class="unchkd"> 
</div>Test1 
<div style="width:10px;height:10px;" class="unchkd"> 
</div>Test2 

$('div').on('click',function(){ 
    if ($(this).hasClass('unchkd')){ 
     $(this).removeClass('unchkd').addClass('chkd'); 
    } 
    else { 
     $(this).removeClass('chkd').addClass('unchkd'); 
    } 
}); 
.chkd{ 
    background-color:blue 
} 
.unchkd{ 
    background-color:white; 
    border: 1px solid black 
}

來源

2013-12-17 Kurkula

我相信這是在這裏找到答案：http://stackoverflow.com/questions/11256992/radio-button-background-image – BFWebAdmin

這方面的經驗長相就像一個複選框。我正在嘗試獲得單選按鈕體驗。 – Kurkula

是的，這是黑客複選框，使其顯示爲一個單選按鈕，因爲它不能從字面上完成。 – BFWebAdmin

你可以，但，不是div使用label並通過設置它的不透明度爲零隱藏收音機。

標記類似：

<label for="male"> 
    <input id="male" type="radio" name="gender" value="male" /> 
    <span class="radio"></span> 
    Male 
</label> 

<label for="female"> 
    <input id="female" type="radio" name="gender" value="female" /> 
    <span class="radio"></span> 
    Female 
</label>

然後是CSS：

input[type="radio"] { 
    position: absolute; 
    opacity: 0; 
} 

input[type="radio"] + .radio { 
    border: 1px solid #333; 
    border-radius: 50%; 
    display: inline-block; 
    width: 10px; 
    height: 10px; 
} 

input[type="radio"]:checked + .radio { 
    background: #333; 
}

小提琴here。

來源

2013-12-17 14:07:20 jayarjo

我掙扎着，並沒有爲我改變標籤。如果你有幾分鐘，你能不能更新我的小提琴。 – Kurkula

可以使用現有的腳本，這是例如： http://arthurgouveia.com/prettyCheckable/或http://damirfoy.com/iCheck/

來源

2013-12-17 14:22:40 mcmac

css背景單選按鈕

回答

相關問題