CSS How to align checkbox image - css

Question

I trying to style my checkbox with custom image, but what I have tried so far is the tick image stick with the text, this doesn't look good, how to make the tick image and text align nicely ?
JS Fiddle
What I want it look like this ✔ mango
CSS
.label{
margin:5px;
color: #ccc;
font-size:12px;
cursor:pointer;
}
.label:hover{
color:#444;
}
input[type=checkbox]{
display:none;
}
input[type=checkbox] + .label {
padding:5px;
}
input[type=checkbox]:checked + .label {
color: #444;
position:relative;
margin:2px;
background-image:url(http://icons.iconarchive.com/icons/custom-icon-design/mini/16/Accept-icon.png);
background-repeat:no-repeat;
background-color:#ccc;
}

Answer 1

Note: From a usability point of view:
when only a single option should be selected, use radio buttons and not ticks.
currently you have to click the label twice to make a different selection; clicking on another option should deselect a previously checked option.
Use padding for the left of the label. In this example, padding-left: 10px
Position the background images x and y position. In this example I have placed it all in the background property:
background: url(urlPath) 10px center no-repeat
That gives us this:
Example
var PG = {
divid: "",
multiselection: "",
optionitem: [],
init: function(divid, multiselection, optionitem) {
PG.divid = divid;
PG.multiselect = multiselection;
PG.optionitem = optionitem;
},
test: function() {
for (var i = 0; PG.optionitem.length > i; i++) {
alert(PG.optionitem[i].name);
}
},
render_1: function() {
$.each(array, function(i, obj) {
var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
"<label class='label' for=" + obj.value + ">" + obj.value + "</label>" +
"<div class='pbar'><div class='pbarinner' style='width:75%;'></div></div>";
$("#" + PG.divid).append(selection);
if ($('input#' + obj.value).is(':checked')) {
$('.pbar').css('display', 'block');
}
});
$("#survey_title").append("What is your favorite fruit??");
$("#choose").append("Please select 1 fruit only:");
$('.the_checkbox').on('change', function(evt) {
if ($(this).siblings(':checked').length >= PG.multiselect) {
this.checked = false;
}
});
},
render_2: function() {
$.each(w_array, function(i, obj) {
var selection = "<input class='the_checkbox' type='checkbox' id=" + obj.value + " name=" + obj.name + " value=" + obj.value + ">" +
"<label class='label' for=" + obj.value + ">" + obj.value + "</label>";
$("#" + PG.divid).append(selection);
});
$("#survey_title").append("item??");
$("#choose").append("Please select 3 item :");
$('.the_checkbox').on('change', function(evt) {
if ($(this).siblings(':checked').length >= PG.multiselect) {
this.checked = false;
}
});
},
save: function() {}
}
var array = [];
array[0] = {
"name": "fruit",
"value": "mango"
};
array[1] = {
"name": "fruit",
"value": "apple"
};
array[2] = {
"name": "fruit",
"value": "orange"
};
array[3] = {
"name": "fruit",
"value": "banana"
};
var w_array = [];
w_array[0] = {
"name": "com",
"value": "RAM"
};
w_array[1] = {
"name": "com",
"value": "DISK"
};
w_array[2] = {
"name": "com",
"value": "BOOK"
};
w_array[3] = {
"name": "com",
"value": "PEN"
};
PG.init("popupfoot", "1", array);
PG.render_1();
/*PG.init("survey_question", "3", w_array);
PG.render_2();*/
.label {
margin: 5px;
color: #ccc;
font-size: 12px;
cursor: pointer;
}
.label:hover {
color: #444;
}
input[type=checkbox] {
display: none;
}
input[type=checkbox] + .label {
padding: 5px;
}
input[type=checkbox]:checked + .label {
color: #444;
position: relative;
margin: 2px;
background: url(http://icons.iconarchive.com/icons/custom-icon-design/mini/16/Accept-icon.png) 10px center no-repeat;
background-color: #ccc;
padding-left: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="popupfoot">
<p id="survey_title"></p>
<h5 id="choose"></h5>
<div id="survey_question"></div>
</div>

Answer 2

Try using the background position property
For e.g.
In your case
background-position: center left;
I've modified the padding left too. Here is the fiddle.
http://jsfiddle.net/8190zjvf/9/
Here I have changed padding-left of the list to 20 px;
And to place the tick in the left I've used the background-position property. Hope it is clear.