自定义 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>