不带标签的样式单选输入

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="display:none" （或类）添加到其输入元素。

.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>

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