FontAwesome für Kontrollkästchen

Question

Ich versuche, FontAwesome für Checkbox zu verwenden - so im unmarkierten Zustand - es wird Trash Symbol angezeigt, und im aktivierten Zustand wird es das gleiche Symbol, aber in roter Farbe anzeigen.

Ich habe die Schriftart-awesome.min.css und die Schriftarten hinzugefügt.

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; 
} 

ich im Ergebnis jedoch das Papierkorb-Symbol sehen Sie, es nicht anklickbar ist und wenn ich darauf klicke, es dreht sich nicht rot .

Wie kann ich es tun?

Answer 1

Versuchen Sie folgendes:

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

Das Problem, das ist, wenn Sie verwenden display: none; Sie sind im Wesentlichen das Element aus dem DOM entfernt, und das Element ist daher nicht anklickbar.

Answer 2

Sie JavaScript verwenden, wenn Sie

wie

Ersetzen Sie Ihre <span></span> mit den folgenden:

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

Oder, wenn Sie jQuery verwenden, können Sie diese verwenden:

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

Answer 3

Es gibt Sie müssen JavaScript nicht verwenden, um das zu erreichen, wonach Sie suchen. Ihr Markup war fast in Ordnung. Sie sollten ein <label> Tag anstelle eines <span> Tags verwenden und außerdem sollten Sie <label> in Ihrem CSS verwenden. Dadurch würden Sie am Ende mit einem Markup wie diese

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

und mit CSS wie diese

.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; 
} 

haben Wie Sie sehen können, habe ich geändert nur Ihre <span> mit dem <label>-Tag.

Damit sind Sie völlig in der Lage zu tun, was Sie suchen, ohne zu verwenden und JavaScript-Code.

Fiddle