input style / input[type=checkbox/radio] 디자인 적용

 

HTML

<!-- checkbox -->
<ul class="list-btn">
  <li>
    <input type="checkbox" id="chk1-1" name="chk1" />
    <label for="chk1-1">chk1</label>
  </li>
  <li>
    <input type="checkbox" id="chk1-2" name="chk1" />
    <label for="chk1-2">chk2</label>
  </li>
  <li>
    <input type="checkbox" id="chk1-3" name="chk1" />
    <label for="chk1-3">chk3</label>
  </li>
  <li>
    <input type="checkbox" id="chk1-4" name="chk1" />
    <label for="chk1-4">chk4</label>
  </li>
</ul>

<!-- radio -->
<ul class="list-btn">
  <li>
    <input type="radio" id="chk1-11" name="radio1" />
    <label for="chk1-11">radio1</label>
  </li>
  <li>
    <input type="radio" id="chk1-22" name="radio1" />
    <label for="chk1-22">radio2</label>
  </li>
  <li>
    <input type="radio" id="chk1-33" name="radio1" />
    <label for="chk1-33">radio3</label>
  </li>
  <li>
    <input type="radio" id="chk1-44" name="radio1" />
    <label for="chk1-44">radio4</label>
  </li>
</ul>

 

CSS

input[type="checkbox"],
input[type="radio"] {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  -webkit-border-radius: 0;
  outline: none;
}
.list-btn {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  margin: -0.375rem -0.1875rem;
}
.list-btn > li {
  position: relative;
  margin: 0.375rem 0.1875rem;
}
.list-btn > li > input[type="checkbox"],
.list-btn > li > input[type="radio"] {
  position: absolute;
  width: 100%;
  height: 100%;
}
.list-btn > li > input[type="checkbox"] + label,
.list-btn > li > input[type="radio"] + label {
  background: #fff;
  padding: 0.375rem 0.875rem;
  font-size: 0.875rem;
  border: 1px solid #e6e6e6;
  /*border-radius: 1.25rem;*/
  color: #202020;
  width: auto;
  text-align: center;
  display: inline-block;
}
.list-btn > li > input[type="checkbox"]:checked + label,
.list-btn > li > input[type="radio"]:checked + label {
  background: #4130df;
  border: 1px solid #4130df;
  color: #fff;
}

 

코드확인

https://codepen.io/csvhixfk-the-scripter/pen/LYvVdEZ