FontAwesome for checkbox

Question

체크 상자에 FontAwesome을 사용하려고합니다. 선택하지 않은 상태에서는 Trash 아이콘이 표시되고 체크 상태에서는 같은 아이콘이 표시되지만 붉은 색으로 표시됩니다.

font-awesome.min.css와 글꼴을 추가했습니다.

HTML :

<div class="delete-checkbox"> 
    <input type="checkbox" id="checkbox-delete-6053923167078"> 
    <span></span> 
</div> 

CSS :

.delete-checkbox input[type="checkbox"] { 
    display: none; 
} 

.delete-checkbox span:before { 
    font-family: "FontAwesome"; 
    font-style: normal; 
    width: 1em; 
    height: 1em; 
    content: '\f014'; 
    margin-right: .3em; 
} 

.delete-checkbox input[type="checkbox"]:checked ~ span:before { 
    color: red; 
} 

내가 휴지통 아이콘은, 그러나, 그것은 클릭 할 수의 결과에서 볼 않으며 나는 그것을 클릭하면, 그것은 빨간색으로하지 않습니다 .

어떻게하면됩니까?

Answer 1

이 시도 :

http://jsbin.com/sanoya/edit?html,css,output

문제는 사용할 때 display: none; 당신은 본질적으로 DOM에서 요소를 제거하고, 요소 따라서 클릭 할 수없는 것입니다.

Answer 2

당신이

를 좋아하는 경우에 당신은 다음과 같이 당신의 <span></span> 교체 자바 스크립트를 사용할 수 있습니다 : 당신이 jQuery를 사용하는 경우,

<span onclick="document.getElementById('checkbox-delete-6053923167078').checked = !document.getElementById('checkbox-delete-6053923167078').checked"></span> 

을 또는, 당신은이를 사용할 수 있습니다

<span onclick="$('#checkbox-delete-6053923167078').prop('checked', !$('#checkbox-delete-6053923167078').prop('checked'));"></span> 

Answer 3

이있다 원하는 것을 얻기 위해 JavaScript를 사용할 필요가 없습니다. 귀하의 마크 업은 거의 괜찮 았습니다. <span> 태그 대신 <label> 태그를 사용해야하며 CSS에 <label>을 사용해야합니다. 이렇게,이

<div class="delete-checkbox"> 
    <input type="checkbox" id="checkbox-delete-6053923167078"> 
    <label for="checkbox-delete-6053923167078"></label> 
</div> 

같은 마크 업 및 당신이 볼 수 있듯이이

.delete-checkbox input[type="checkbox"] { 
    display: none; 
} 

.delete-checkbox label:before { 
    font-family: "FontAwesome"; 
    font-style: normal; 
    width: 1em; 
    height: 1em; 
    content: '\f014'; 
    margin-right: .3em; 
} 

.delete-checkbox input[type="checkbox"]:checked ~ label:before { 
    color: red; 
} 

같은 CSS로 끝을 것이다, 나는 단지 <label> 태그로 <span>을 변경했습니다.

이렇게하면 JavaScript 코드를 사용하지 않고도 원하는 것을 할 수 있습니다. 본질적으로 DOM에서 요소를 제거합니다 : "없음 표시",

Fiddle