只有css的单选按钮自定义答案

【问题标题】：radio button custom with only css只有css的单选按钮自定义
【发布时间】：2021-06-05 21:43:28
【问题描述】：

我想要这种无线电输入，但我不知道该怎么做。

谢谢。

html

<input type="radio" id="Professionel" value="Professionel">
                    <label for="Professionel">Professionel</label>

【问题讨论】：

标签： css user-interface button user-experience

【解决方案1】：

这不是一个完整的解决方案，它仍然需要:focus、:hover 和:active 样式。这应该会给您一个良好的开端。

您还应该结帐pretty-checkbox

body {
  font-family: sans-serif;
}

.custom-check {
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

/* Hide input accessibly */
.custom-check > input {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}
.custom-check > span {
  display: block;
  line-height: 1.5;
}

.custom-check > span::before,
.custom-check > span::after {
  content: '';
  display: inline-block;
  position: absolute;
}

.custom-check > span::before,
.custom-check > span::after {
  width: 2ch;
  height: 2ch;
  left: 0;
  top: 0;
  border: 2px solid #e1e1e1;
  border-radius: 25px;
}

.custom-check > span::after {
  transition: background-color 0.25s ease-out;
}

.custom-check > input:checked + span::after {
  background-color: cornflowerblue;
}

.custom-check > span {
  padding-left: 3ch;
}

<label for="customCheck" class="custom-check" >
  <input type="checkbox" id="customCheck" />
  <span>
    Your Label
  </span>
</label>

【讨论】：

【解决方案2】：

您似乎已经有了该标记，有什么问题？

    <input type="radio" id="Professionel" value="Professionel">
    <label for="Professionel">Un Professionel</label>

【讨论】：

显示结果但我缺少 css