Vue

by the94air

HTML

<div id="app">
  <div class="card">
    <label class="f-contain">
      <span>First checkbox</span>
      <input type="checkbox">
      <div class="f-input"></div>
    </label>
    <label class="f-contain">
      <span>Second checkbox</span>
      <input type="checkbox" checked="">
      <div class="f-input"></div>
    </label>
    <label class="f-contain">
      <input type="checkbox" disabled>
      <span>Third checkbox</span>
      <div class="f-input"></div>
    </label>
    <label class="f-contain">
      <span>Forth checkbox</span>
      <input type="checkbox" checked="" disabled>
      <div class="f-input"></div>
    </label>
  </div>

  <div class="card">
    <label class="f-contain">
      <span>First radio</span>
      <input type="radio" name="radio1">
      <div class="f-input"></div>
    </label>
    <label class="f-contain">
      <span>Second radio</span>
      <input type="radio" name="radio1" checked="">
      <div class="f-input"></div>
    </label>
    <label class="f-contain">
      <input type="radio" name="radio2" disabled>
      <span>Third radio</span>
      <div class="f-input"></div>
    </label>
    <label class="f-contain">
      <span>Forth radio</span>
      <input type="radio" name="radio2" checked="" disabled>
      <div class="f-input"></div>
    </label>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 1.5rem;
  font-family: Helvetica;
}

.card {
  background: #fff;
  border-radius: .25rem;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  transition: all 0.2s;
}

.card .f-contain:last-child {
  margin-bottom: 0;
}

.f-contain *, .f-contain *::before, .f-contain *::after {
  box-sizing: content-box !important;
}

.f-contain input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.f-contain span {
  line-height: 1.54;
  font-family: inherit;
  font-size: inherit;
}

.f-contain {
  display: table;
  position: relative;
  padding-left: 1.8rem;
  cursor: pointer;
  margin-bottom: .5rem;
}

.f-contain input[type="checkbox"] ~ .f-input::after {
  content: '';
  position: absolute;
  display: none;
  left: .45rem;
  top: .18rem;
  width: .25rem;
  height: .6rem;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transition: background 250ms;
  transform: rotate(45deg);
}

.f-contain input[type="radio"] ~ .f-input::after {
  content: '';
  position: absolute;
  display: none;
  left: .25rem;
  top: .25rem;
  width: .75rem;
  height: .75rem;
  border-radius: 100%;
  background: #fff;
  transition: background 250ms;
  transform: rotate(45deg);
}

.f-contain input:disabled ~ .f-input::after {
  border-color: #8795A1;
}

.f-contain input:checked ~ .f-input::after {
  display: block;
}

.f-contain input[type="checkbox"] ~ .f-input {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.25rem;
  width: 1.25rem;
  background: #F1F5F8;
  transition: background 250ms;
  border: 1px solid #B8C2CC;
  border-radius: 0.125rem;
}

.f-contain input[type="radio"] ~ .f-input {
  position: absolute;
  top: 0;
  left: 0;
  height: 1.25rem;
  width: 1.25rem;
  background: #F1F5F8;
  transition: background 250ms;
  border: 1px solid #B8C2CC;
  border-radius: 100%;
}

.f-contain:hover input ~ .f-input,
.f-contain input:focus ~ .f-input {
  background: #e7eef3;
}

.f-contain input:checked ~ .f-input {
  background: #3490DC;
  border-color:...

Vue

new Vue({
  el: "#app",
  data: {

  },
});