How to put a custom image instead of checkbox next to text? - html

Question

.selected_area {
background-color: #c8c8c8;
height: 330px;
border-radius: 5px;
width:233px;
margin-top:5px;
}
.selected_area label input[type="checkbox"] {
display:none;
}
.selected_area label input[type="checkbox"] + .label-text:before {
content: url("../images/xxx.png");
speak: none;
font-style: noraml;
font-size: normal;
font-variant: normal;
font-transform: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
/*width: em;*/
/*display: inline-block;*/
margin-right: 10px;
}
.selected_area label input[type="checkbox"]:checked + .label-text:before {
content: url("../images/xxx.png");
}
<div class="selected_area">
<label>
<input type="checkbox" value="scooter" id="">
<div class="label-text"><span>This is a testThis is a testThis is a testThis is a testThis is a testThis is a test</span></div>
</label>
</div>
Now I am using my image instead of original checkbox image.
The result was not perfect.
How do I do to make my text next to my image and if the text is too long, it will display on next line but still next to image not under it?

Answer 1

I hope this is what you expect. Get rid of your <span> element and put your text under a separate div. Then float the image and text div to the left and apply a margin-left to the text div so that it will not overlap with the image.
.selected_area {
background-color: #c8c8c8;
height: 330px;
border-radius: 5px;
width: 233px;
margin-top: 5px;
}
.selected_area label input[type="checkbox"] {
display: none;
}
.label-text{
float: left;
display: inline-block;
word-break: break-all;
}
#text{
margin-left: 25px;
}
.selected_area label input[type="checkbox"] + .label-text:before {
content: url("http://files.softicons.com/download/toolbar-icons/black-wireframe-toolbar-icons-by-gentleface/png/16/checkbox_unchecked.png");
speak: none;
font-style: noraml;
font-size: normal;
font-variant: normal;
font-transform: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
/*width: em;*/
/*display: inline-block;*/
margin-right: 10px;
}
.selected_area label input[type="checkbox"]:checked + .label-text:before {
content: url("http://files.softicons.com/download/toolbar-icons/black-wireframe-toolbar-icons-by-gentleface/png/16/checkbox_checked.png");
}
<div class="selected_area">
<label style="display: inline">
<input type="checkbox" value="scooter" id="">
<div class="label-text">
</div>
<div id="text">This is a testThis is a testThis is a testThis is a testThis is a testThis is a test</div>
</label>
</div>

Answer 2

This is what I have for one of my page where I have a custom checkbox, just giving an example
input[type="checkbox"]{
vertical-align:middle;
margin:-3px 5px 0 0;
background: #fff;
height:17px;
width:17px;
opacity: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
input[type="checkbox"]+label:before{
content:"";
display:inline-block;
margin:-3px 8px 0 -25px;
vertical-align:middle;
height:17px;
width:17px;
}
input[type="checkbox"]+label:before{
background:url(image url) {position to box};
}
input[type="checkbox"]:checked+label:before{
background:url(image url){position to box with tick};
}

Answer 3

I have done the needed using a checkbox hack , do check it out :
Html :
<label class="myCheckbox">
<input type="checkbox" name="test"/>
<span></span>
</label>
<p>This is test</p>
CSS :
.myCheckbox {
float: left;
}
`.myCheckbox input {
display: none;
}`
`.myCheckbox span {
width: 20px;
height: 20px;
display: block;
background: url("http://www.findanyfloor.com/pub/images/checkbox.png");
}`
`.myCheckbox input:checked + span {
background: url("http://2.bp.blogspot.com/-FBS0AYl_Gug/Uo5bW7XztnI/AAAAAAAADrA/vIr35ivrZOM/s1600/Checkbox+icon+image_small.png");
}`
I hope it solves your query.