JSFiddle - React, Tailwind, and code Playground

by this_mong

HTML

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<h1>* 이미지를 이용한 체크박스 style</h1>
<label class="itemType">
    <div class="item_chk">
        <input type="radio" name="item" class="itemChk" checked>
        <div class="item_chkImg"></div>
    </div>
    하나
</label>
<label class="itemType">
    <div class="item_chk">
        <input type="radio" name="item" class="itemChk">
        <div class="item_chkImg"></div>
    </div>
    둘
</label>

CSS

.item_chk {
  position:relative;
  width:23px;
  height:23px;
  display:inline-block;
  vertical-align:sub;
}
.item_chk > input[type="radio"] {
  position:absolute;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  height: 15px;
  width: 15px;
  padding: 0;
  border: 0;
  left: 0;
}
.item_chk > input[type="radio"] + .item_chkImg {
  width:23px;
  height:23px;
  background:url('https://tistory2.daumcdn.net/tistory/2766242/skin/images/item_chk.png') 0px no-repeat;
  cursor:pointer;
}

.item_chk > input[type="radio"]:checked + .item_chkImg {
  background:url('https://tistory2.daumcdn.net/tistory/2766242/skin/images/item_chk.png') -25px no-repeat;
}