CODEWITHSUNDEEP
htmlcsscheckboxfont-awesome
Dejell
Dejell

Reputation: 14317

FontAwesome for checkbox

I am trying to use FontAwesome for checkbox - so in unchecked state - it will display Trash icon, and in checked state, it will display the same icon but in red color.

I added the font-awesome.min.css and the fonts.

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

I do see in the result the trash icon, however, it's not clickable and when I click on it, it doesn't turn red.

How can I do it?

Upvotes: 0

Views: 2141

Answers (3)

Andy-Delosdos
Andy-Delosdos

Reputation: 3720

You can use JavaScript if you like

Replace your <span></span> with the following:

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

Or, if you are using jQuery, you can use this:

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

Upvotes: 1

Aer0
Aer0

Reputation: 3907

There's no need to use JavaScript to achieve what you're looking for. Your markup was almost fine. You should use a <label> tag, instead of a <span> tag and also, you should have used <label> in your CSS. Doing so, you would have end up with a markup like this

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

and with CSS like this

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

As you can see, I've only changed your <span> with the <label> tag.

With this, you are totally able to do what you're looking for, without using and JavaScript code.

Fiddle

Upvotes: 1

Toby
Toby

Reputation: 13385

Try this:

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

The problem is that when you use display: none; you are essentially removing the element from the DOM, and the element is therefore not clickable.

Upvotes: 2

Related Questions