이미지로 체크 박스를 만드는 방법

Question

내 웹 사이트에 기본 체크 박스가 있으며 모든 체크 박스에 텍스트 만 있습니다 (예 : example).

체크 박스가 이미지를 갖도록 설계 할 수 있습니까? 선택한 경우 "v"표시를 확인란에 넣을 수 있습니까?

Answer 1

이것은 당신이

input { 
 
    display: none 
 
} 
 

 
/* switch image */ 
 
label[for="chk1"] { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 2px solid black; 
 
    background: url(http://placehold.it/100/f00); 
 
} 
 
#chk1:checked ~ label[for="chk1"] { 
 
    background: url(http://placehold.it/100/ff0); 
 
} 
 

 
/* add content */ 
 
label[for="chk2"] { 
 
    display: inline-block; 
 
    text-align: center; 
 
    width: 100px; 
 
    height: 100px; 
 
    border: 2px solid black; 
 
    position: relative; 
 
} 
 
#chk2:checked ~ label[for="chk2"]::after { 
 
    content: 'V'; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    font-size: 90px; 
 
    font-weight: bold; 
 
    font-family: arial; 
 
}

<input id="chk1" type="checkbox"> 
 
<input id="chk2" type="checkbox"> 
 

 
<label for="chk1"></label> 
 
<label for="chk2"></label> 
 

 
<div>Click a box to toggle it</div>

Answer 2

나는 '돈 라벨을 사용하여 이미지 기반의 체크 박스를 시뮬레이션 할 수있는 방법입니다

---

나는이 같은 것을보고 싶지 대부분의 사람들은 자신의 체크 박스에 이미지를 넣는다고 생각하지 않습니다. 그것들은 @LGSon처럼 이미지를 체크 박스처럼 만들거나 div와 함께 이미지와 체크 박스를 묶습니다. 이런 식으로 뭔가 :

function toggleCheck(sibling) { 
 
    var checkBox = sibling.parentNode.getElementsByTagName("input")[0]; 
 
    checkBox.checked = !checkBox.checked; 
 
}

.image-box { 
 
    width: 150px; 
 
    text-align: center; 
 
    background: #E9E8E7; 
 
    padding: 10px; 
 
    -webkit-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 2px 2px 5px 0px rgba(0, 0, 0, 0.75); 
 
    border-radius: 5px 5px 5px 5px; 
 
    -moz-border-radius: 5px 5px 5px 5px; 
 
    -webkit-border-radius: 5px 5px 5px 5px; 
 
} 
 
.image-box img { 
 
    max-width: 100%; 
 
    display: block; 
 
    margin-bottom: 7px; 
 
}

<div class="image-box"> 
 
    <img src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" onClick="toggleCheck(this);" /> 
 
    <input id="dogs" type="checkbox" name="dogs" value="Dog"> 
 
    <label for="dogs">I like dogs</label> 
 
</div>