radio button custom with only css

Question

I would like to have this kind of radio input but I don't know how to do it.

thank you.

html

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

Answer 1

This isn't a complete solution, it still needs :focus, :hover, and :active styles. This should give you a good head start.

You should also checkout 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>