styling the default html checkboxes - html

Question

This HTML code shows two checkboxes next to each other
<div id="mr_mrs">
<ul class="mr_mrs form-no-clear">
<li id="mr" class="popular-category">
<label for="Mr" id="mr">Mr</label>
<span><input name="Mr" id="Mr" type="checkbox" /></span>
<div class="clearboth"></div>
</li>
<li id="mrs" class="popular-category">
<label for="Mrs" id="mrs">Mrs</label>
<span><input name="Mrs" id="Mrs" type="checkbox" /></span>
<div class="clearboth"></div>
</li>
</ul>
</div>
I want to customize the checkboxed to square and on selecting the checkbox fill some color to it. IMAGE BELOW
How can this be done ?

Answer 1

To sit the two controls next to each other, set their display to inline block: display: inline-block. (Default for div is block display.)
To enable the user to check the box by clicking the label text, there are a couple options. Both are shown in the example below.
<label> is parent to the text and checkbox.
Use <label for="myId">some text</label><input id="myId"> to associate the label to the input.*
*Note: when using the for/id method, it's label-for and input-id. I noticed in the example the id was applied to both elements, an id should be unique to the page.
.checkbox {
margin: 4px;
display: inline-block;
}
<div class="checkbox">
<label>Box 1<input type="checkbox"></label>
</div>
<div class="checkbox">
<label for="myId">Box 2</label>
<input id="myId" type="checkbox">
</div>