Checkmark in checkbox not appearing when changing CSS

I’m trying to change the size,color,etc… of a checkbox using CSS. I have everything formatted the way I want aside from when the box is checked. When the box is checked, the check/tick mark does not appear and nothing seems to happen. However, I know it works otherwise because I can set the background color to change, and it works then.

Does adding “content: ‘✔’;” do anything in the CSS as far as what I’m trying to accomplish, or am I using it incorrectly?

For example:

input[type=checkbox]:checked {
  content: '✔';
  background-color:white;
}

Here’s a fiddle that demonstrates the background color of the checkbox changing.

Here’s another fiddle of what I’m trying to do by using a check mark when the box is checked.

Edit - I’m using chrome and that seems to be the issue. I checked in firefox and it works

Knowing this, what can I do to accomplish what I have described?


solution

The content property currently only applies to pseudo elements such as :before/:after.

Checkbox elements are notoriously difficult to style (not all browsers allow you to specify a height/width; also, they are self enclosed elements, meaning that they cannot contain pseudo elements.

Therefore, the most common approach for creating custom checkboxes is to hide the input/checkbox element and style a succeeding label element via a pseudo element. For instance:

<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>

Utilize the adjacent sibling combinator, +, in order to change the styling of the custom label element/pseudo element:

input[type="checkbox"]:checked + label {}

Example Here

This will get you started. Style accordingly.

input[type="checkbox"] {
  display: none;
}
input[type="checkbox"] + label {
  display: inline-block;
  border: 1px solid #000;
  width: 30px;
  height: 30px;
  position: relative;
}
input[type="checkbox"]:checked + label:after {
  content: '✔';
  display: inline-block;
  font-size: 1.6em;
}
<input type="checkbox" id="checkbox1">
<label for="checkbox1"></label>