How to Avoid Jump Between Checked and Unchecked States

I have custom checkboxes, and the content is jumping when I click between checked and unchecked states. How can I stop this from happening? Here's my code:

CSS:

input[type=checkbox] {
display: none;
}

label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 18px;
background-color: rgba(225, 225, 225);
border-radius:4px;
border:1px solid #cecece;
}

input[type=checkbox]:checked + label:before {
content: "\2713";
font-size: 15px;
color: red;
text-align: center;
line-height: 15px;
}

HTML:

<input id="checkbox1" type="checkbox" class="checkbox" name="lists[Fortune Daily]" />
<label for="checkbox1"><img class="list" src="http://ift.tt/1v5ZZI4" /> <span>Fortune Daily</span>
</label>

Thank you in advance!