只有 css 的自定义单选按钮

Question

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

谢谢。

html

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

Answer 1

您似乎已经有了那个标记，有什么问题吗？

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

Answer 2

这不是一个完整的解决方案，它仍然需要 :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>

只有 css 的自定义单选按钮

radio button custom with only css

css

user-interface

button

user-experience