是否有可能使单选按钮看起来像复选框，没有图像?

Question

好的，我试图使一些单选按钮看起来像复选框，但是我读过的所有提示都告诉我必须使用复选框的图像。我不舒服，所以需要知道是否有任何方法可以做到这一点，而不链接任何图像到单选按钮。

input[type=radio].checkbutton {
margin-top: 2px;
appearance: checkbox!important;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
color: #717170!important;
border: 2px #acacac solid!important;
background-color: #FFF!important;
font-size: 13px!important;
height: 15px;
width: 15px;
}
input[type=radio].checkbutton:checked {
appearance: checkbox;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
-ms-appearance: checkbox;
-o-appearance: checkbox;
}

<input type="radio" class="checkbutton" id="2" value="2" name="box">
<input type="radio" class="checkbutton" id="3" value="3" name="box">
<input type="radio" class="checkbutton" id="4" value="4" name="box">
<input type="radio" class="checkbutton" id="5" value="5" name="box">

有没有办法样式的单选按钮，而不使用不可配置的图像?

Answer 1

使用:checked状态对:before和:after应用样式

div {
display: flex;
max-width: 160px;
justify-content: space-between
}
/* custom checkbox */
input[type="radio"] {
height: 23px;
width: 23px;
margin: 0;
padding: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 2px solid #3f51b5;
border-radius: 3px;
background: #fff;
position: relative;
cursor: pointer;
}
input[type="radio"]:checked {
border: 2px solid #3f51b5;
background: #3f51b5;
}
input[type="radio"]:checked:before, input[type="radio"]:checked:after {
content: "";
position: absolute;
height: 2px;
background: #ffffff;
}
input[type="radio"]:checked:before {
width: 8px;
top: 11px;
left: 2px;
transform: rotate(44deg);
}
input[type="radio"]:checked:after {
width: 14px;
top: 8px;
left: 5px;
transform: rotate(-55deg);
}
input[type="radio"]:focus {
outline: none;
}

<div>
<input type="radio" name="check" checked>
<input type="radio" name="check">
<input type="radio" name="check">
<input type="radio" name="check">
</div>