Styling radio input without label

Question

I had done with radio buttons with label customization. However, type="radio" can't show and work normally once without labels.

Is it possible to apply pure CSS style to radio input without labels or any workaround for this issue? If so, how can I do this? lots of resources are customizing radio buttons with labels to be after the input.

I have the following markup:

[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

It is a problem that one can't 'go back' in CSS so we can't style the input because it has a following sibling label element.

The only things I can think of therefore require some addition. The most straightforward workaround would seem to be at the time of adding the label to the HTML just add style="display:none" (or a class) to its input element.

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

Other things you could do if you absolutely know that the name of that group all need special styling is to select on that name. This wouldn't require additions but is of course more difficult from the ongoing maintenance point of view.