无标签的收音机输入样式

Question

我已经完成了带有标签自定义的单选按钮。然而，type="radio"在没有标签的情况下不能正常显示和工作一次。

是否可以在没有标签或任何解决方法的情况下将纯CSS样式应用于无线电输入？如果是，我该怎么做？许多资源都在定制带有标签的单选按钮，以便在输入之后使用。

我有以下标记：

[type="radio"]:checked,
[type="radio"]:not(:checked) {
display: none;
}
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 20px;
cursor: pointer;
line-height: 16px;
display: inline-block;
color: red;
}

/* radio outer circle */
[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
border: 1px solid green;
border-radius: 100%;
background: #fff;
}

/* radio inner circle */
[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
content: "";
width: 10px;
height: 10px;
background: orange;
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);
}

<h2>radio button <i>with</i> label</h2>
<form>
<input type="radio" id="kaios" value="kaios" name="radio-group" checked>
<label for="kaios">KaiOS</label>
<input type="radio" id="ios" value="ios" name="radio-group">
<label for="ios">iOS</label>
<input type="radio" id="android" value="android" name="radio-group">
<label for="android">Android</label>
</form>
<hr />
<h2>radio button <i>without</i> label</h2>
<form>
<input type="radio" name="options" value="KaiOS">KaiOS<br />
<input type="radio" name="options" value="Firefox">Firefox<br />
</form>

Answer 1

在CSS中不能"返回"是一个问题，因此我们不能对输入进行样式化，因为它有下面的同级标签元素。

因此，我唯一能想到的事情需要一些补充。最直接的解决方法似乎是在将标签添加到HTML时，只需添加style="；显示：无"；(或类(添加到其输入元素。

.dontshow[type="radio"]:checked,
.dontshow[type="radio"]:not(:checked) {
display: none;
}
[type="radio"]:checked+label,
[type="radio"]:not(:checked)+label {
position: relative;
padding-left: 20px;
cursor: pointer;
line-height: 16px;
display: inline-block;
color: red;
}

/* radio outer circle */
[type="radio"]:checked+label:before,
[type="radio"]:not(:checked)+label:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
border: 1px solid green;
border-radius: 100%;
background: #fff;
}

/* radio inner circle */
[type="radio"]:checked+label:after,
[type="radio"]:not(:checked)+label:after {
content: "";
width: 10px;
height: 10px;
background: orange;
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);
}

<h2>radio button <i>with</i> label</h2>
<form>
<input type="radio" id="kaios" value="kaios" name="radio-group" class="dontshow" checked>
<label for="kaios">KaiOS</label>
<input type="radio" id="ios" value="ios" name="radio-group" class="dontshow">
<label for="ios">iOS</label>
<input type="radio" id="android" value="android" name="radio-group" class="dontshow">
<label for="android">Android</label>
</form>
<hr />
<h2>radio button <i>without</i> label</h2>
<form>
<input type="radio" name="options" value="KaiOS">KaiOS<br />
<input type="radio" name="options" value="Firefox">Firefox<br />
</form>

如果你绝对知道该组的名称都需要特殊的样式，你可以做的其他事情就是在该名称上进行选择。这不需要添加，但从持续维护的角度来看，这当然更困难。