CSS單選按鈕標籤要求圈子

我有單選按鈕，我想，以顯示所有拉布勒CSS單選按鈕標籤要求圈子

<ul> 
    <li> 
     <input type='radio' value='1' name='radio' id='radio1'/> 
     <label for='radio1'>Value 1</label> 
    </li> 
</ul>

和CSS這個

ul { 
    list-style: none; 
} 
li { 
    display: inline-block; 
    margin-right: 15px; 
} 
input { 
    visibility:hidden; 
} 
label { 
    cursor: pointer; 
} 
input:checked + label { 
    background: red; 
}

我需要顯示每個單選按鈕的拉布勒圈與圓我從Here

來源

2016-03-11 Vipin Sharma

修復您的格式（刪除'>'從你的代碼）。並描述你有什麼問題。 – dfsq

需要HTML，*沒有假設任何*，它看起來像你沒有單選按鈕。 – zer00ne

你不能看到你的問題不呈現HTML嗎？爲了使它看起來正確，從代碼塊中刪除'>'。這不是一個報價。 – dfsq

得到這個例子您可以使用border-radius使標籤成爲一個圓圈。

ul { 
 
    list-style: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
    margin-right: 15px; 
 
} 
 
input { 
 
    visibility:hidden; 
 
} 
 
label { 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    line-height: 50px; 
 
    width: 50px; 
 
    height: 50px; 
 
    border-radius: 50%; 
 
    background: red; 
 
} 
 
input:checked + label { 
 
    color: white; 
 
}

<ul> 
 
    <li> 
 
     <input type='radio' value='1' name='radio' id='radio1'/> 
 
     <label for='radio1'>Value 1</label> 
 
    </li> 
 
    <li> 
 
     <input type='radio' value='2' name='radio' id='radio2'/> 
 
     <label for='radio2'>Value 2</label> 
 
    </li> 
 
    <li> 
 
     <input type='radio' value='3' name='radio' id='radio3'/> 
 
     <label for='radio3'>Value 3</label> 
 
    </li> 
 
</ul>

來源

2016-03-11 11:14:26 LGSon

是的，但我們可以讓紅色背景默認，它檢查後，它可能嗎？ –

CSS單選按鈕標籤要求圈子

回答

相關問題