core114 core114 - 1 month ago 20
CSS Question

checkbox style issue css

I have some code for the check box items, im try to make this tick like a close icon, i cant do it correctly , how can i make it this type, look image
example check box

enter image description here

please anyone help me,
Thanks



.round {
position: relative;
}

.round label {
background-color: #fff;
border: 1px solid #81bea0;
border-radius: 50%;
cursor: pointer;
height: 28px;
left: 0;
position: absolute;
top: 0;
width: 28px;
}

.round label:after {
border: 2px solid #fff;
border-top: none;
border-right: none;
content: "";
height: 6px;
left: 7px;
opacity: 0;
position: absolute;
top: 8px;
transform: rotate(-45deg);
width: 12px;
}

.round input[type="checkbox"] {
visibility: hidden;
}

.round input[type="checkbox"]:checked + label {
background-color: #54a985;
border-color: #66bb6a;
}

.round input[type="checkbox"]:checked + label:after {
opacity: 1;
}

<span class="chk-box01"><div class="round">
<input type="checkbox" id="checkbox" />
<label for="checkbox"></label>
</div></span>




Answer Source

#checkbox{
  display: none;
}

label[for="checkbox"]{
  display: inline-block;
  width: 30px;
  height: 30px;
  border: 2px solid pink;
  border-radius: 100%;
  cursor: pointer;
  position: relative;
}

#checkbox:checked + label{
  background: red;
}
#checkbox:checked + label > span{
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 3px;
  background: white;
  top: 0; left: 0; right: 0; bottom: 0; margin: auto;
  transform: rotate(45deg);
}
#checkbox:checked + label > span::before{
  content: '';
  display: inline-block;
  position: absolute;
  width: 18px;
  height: 3px;
  background: white;
  top: 0; left: 0; right: 0; bottom: 0; margin: auto;
  transform: rotate(90deg);
}
 <input type="checkbox" id="checkbox" />
<label for="checkbox"><span></span></label>