Styling form checkboxes with font awesome, <input> inside of <label>

Question

After following this question and getting the idea of styling which is shown below, I tried to replace the default checkboxes and style them.

Currently, the problem is that the checkboxes don't tick and I don't understand why.

Link to JsFiddle:

Fiddle Link Here

HTML

<div class="col-md-6 checkboxes">
<label for="id_tags_0"><input type="checkbox" name="tags" value="4" id="id_tags_0">
 Tag 1</label>
<label for="id_tags_1"><input type="checkbox" name="tags" value="1" id="id_tags_1">
Tag 2</label>
</div>

CSS

.checkboxes label {
    /*display: inline-block;*/
    cursor: pointer;
    position: relative;
}

/*Hide default checkbox*/
.checkboxes  input[type=checkbox] { display: none; }

/*Show an empty box before the our label by default*/
.checkboxes label:before {
    content: "";
    display: inline-block;
    margin-right: 10px;
    position: absolute;
    left: 0;
    top: 3px;
    background-color: #fff;
    border: 2px solid #d0d0d0;
    border-radius: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    transition: all 0.25s;
    font-family: "FontAwesome";
    color: #fff;
    text-align: center;
}


/*When checkbox input is checked, add a tick to our box */
.checkboxes label>input[type=checkbox]:checked:before {
/* Content: https://fontawesome.com/icons/check?style=solid */
    content: "\f00c";
    background-color: #66676b;
    border: 2px solid #66676b;
}

.checkboxes label>input[type=checkbox]:checked {
/* Content: https://fontawesome.com/icons/check?style=solid */
    content: "\f00c";
    background-color: #66676b;
    border: 2px solid #66676b;
}

Answer 1

You are trying to use parent selector, which is not possible through css.

Instead you can try this. add a span after the checkbox and style it.

.checkboxes label {
	/*display: inline-block;*/
	cursor: pointer;
	position: relative;
	padding-left: 28px;
	margin-right: 20px;
	margin-bottom: 0;
	line-height: 24px;
	font-size: 16px;
}

/*Hide default checkbox*/
.checkboxes  input[type=checkbox] { display: none; }

/*Show an empty box before the our label by default*/
.checkboxes label span:before {
	content: "";
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 10px;
	position: absolute;
	left: 0;
	top: 3px;
	background-color: #fff;
	border: 2px solid #d0d0d0;
	border-radius: 4px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	transition: all 0.25s;
	font-family: "FontAwesome";
	font-size: 12px;
	color: #fff;
	text-align: center;
	line-height: 15px;
}


/*When checkbox input is checked, add a tick to our box */
.checkboxes label>input[type=checkbox]:checked + span:before {
/* Content: https://fontawesome.com/icons/check?style=solid */
	content: "\f00c";
	background-color: #66676b;
	border: 2px solid #66676b;
}

.checkboxes label>input[type=checkbox]:checked {
/* Content: https://fontawesome.com/icons/check?style=solid */
	content: "\f00c";
	background-color: #66676b;
	border: 2px solid #66676b;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" rel="stylesheet"/>






<div class="col-md-6 checkboxes">
<label for="id_tags_0">
<input type="checkbox" name="tags" value="4" id="id_tags_0">
<span></span>
 Tag 1</label>
<label for="id_tags_1"><input type="checkbox" name="tags" value="1" id="id_tags_1">
<span></span>
Tag 2</label>
<label for="id_tags_2"><input type="checkbox" name="tags" value="2" id="id_tags_2">
<span></span>
Tag 3</label>
<label for="id_tags_3"><input type="checkbox" name="tags" value="3" id="id_tags_3">
<span></span>
Tag 4</label>
<label for="id_tags_4"><input type="checkbox" name="tags" value="5" id="id_tags_4">
<span></span>
Tag 5</label>
</div>