自定義 HTML 中的單選按鈕並刪除可勾選的圓圈

Question

我有一個問題，有沒有辦法自定義單選按鈕並使用可檢查的卡片而不是可檢查的圓圈？

我正在處理多項選擇題，需要它來使問題視圖更具吸引力。 這是基本的無線電組。 我想要的是只選擇一張卡片而不是默認的檢查按鈕。

<form id="myForm">
<input type="radio" name="radioName" value="1" /> 1 <br />
<input type="radio" name="radioName" value="2" /> 2 <br />
<input type="radio" name="radioName" value="3" /> 3 <br />
</form>

Answer 1

你可以試試這個

 .container { display: block; position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; font-size: 22px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .container input { position: absolute; opacity: 0; cursor: pointer; } .checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; } .container:hover input ~ .checkmark { background-color: #ccc; } .container input:checked ~ .checkmark { background-color: #2196F3; } .checkmark:after { content: ""; position: absolute; display: none; } .container input:checked ~ .checkmark:after { display: block; } .container .checkmark:after { top: 9px; left: 9px; width: 8px; height: 8px; background: white; }

 <h1>Custom Radio Buttons</h1> <label class="container">One <input type="radio" checked="checked" name="radio"> <span class="checkmark"></span> </label> <label class="container">Two <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="container">Three <input type="radio" name="radio"> <span class="checkmark"></span> </label> <label class="container">Four <input type="radio" name="radio"> <span class="checkmark"></span> </label>

Answer 2

這是我不久前使用的資源，它幫助我為項目構建自定義單選按鈕：自定義單選按鈕的代碼筆示例

 [type="radio"]:checked, [type="radio"]:not(:checked) { position: absolute; left: -9999px; } [type="radio"]:checked+label, [type="radio"]:not(:checked)+label { position: relative; padding-left: 28px; cursor: pointer; line-height: 20px; display: inline-block; color: #666; } [type="radio"]:checked+label:before, [type="radio"]:not(:checked)+label:before { content: ''; position: absolute; left: 0; top: 0; width: 18px; height: 18px; border: 1px solid #ddd; border-radius: 100%; background: #fff; } [type="radio"]:checked+label:after, [type="radio"]:not(:checked)+label:after { content: ''; width: 12px; height: 12px; background: #F87DA9; position: absolute; top: 4px; left: 4px; border-radius: 100%; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; } [type="radio"]:not(:checked)+label:after { opacity: 0; -webkit-transform: scale(0); transform: scale(0); } [type="radio"]:checked+label:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }

 <form action="#"> <p> <input type="radio" id="test1" name="radio-group" checked> <label for="test1">Apple</label> </p> <p> <input type="radio" id="test2" name="radio-group"> <label for="test2">Peach</label> </p> <p> <input type="radio" id="test3" name="radio-group"> <label for="test3">Orange</label> </p> </form>