怎么样通过HTMl+CSS实现单选框，复选框美观的样式？

<div class="check-wrappers">
  <span class="c-checkbox checked">
    <input type="radio" autocomplete="off" name="type" style="display:none;" value="1" checked="checked">
  </span>
  <span></span>
</div>

.cart-checkbox.checked {
  background-position: -29px 0;
}
.c-checkbox {
  display: block;
  width: 25px;
  height: 25px;
  margin: 0 auto;
  background: url(/shop-cart.png) no-repeat 0 0;
  background-size: 60px 120px;
}