Customize checkbox checked style

Question

I am trying to customize my checkbox, the final goal is to look as close as possible to this:

Don't mind the background on Remember me it's just to hide the text of the original label that is on my native language.

Even though it seems a lot different, at first I just wanted to changed the tick sign with a blue square and use the original checkbox view so if I've missed something and it's still the easiest way please provide example.

However I was unable to find an attribute/option to change just that so I dig a little deeper and I decided to use THIS example to achieve my goal.

This is what I achieved on my own - JSFiddel Example but there are two major things I want to add if it's gonna be that way:

• I don't know why I should get the <label> tag involved but it seems that I can not bypass it, so now I'm not sure what's the best way to add the Remember me text as it was before in between the <label>..</label> tags. Now if i put it there it's messing with the checkbox itself.
• I want the unchecked box to look more like the original one. now I use solid corol (lightgrey) but it would be nice if it's closer to the original style.

And of course, any changes that will make things look more like the example provided in the question are appreciated. I'm not stuck with this idea but it seems the closest to what I want.

Answer 1

You must use the label, because otherwise you cannot check the checkbox when you click on it.

For the "Remember me", you can add another label, which contains the text. To have it on the same line, you must add display: inline-block to #wrap

<div id="wrap">
    <input type='checkbox' name='thing' value='valuable' id="thing" />
    <label class="mark" for="thing"></label>
</div>
<label for="thing">Remember me</label>

#wrap {
    display: inline-block;
}

To be more like the native checkbox when unchecked, you can use

background: transparent;

To distinguish between the two labels, I used class="mark" for the box.

See modified JSFiddle

This works in Chrom, but at least for Firefox 20

#thing {
    display: none;
}

doesn't work. For Firefox 20, you must use

#thing {
    position: absolute;
    visibility: hidden;
}

to hide the checkbox and take it out of the normal flow.

JSFiddle

Update:

You can also try #thing + label:before to create a checkbox

#thing + label:before
{
    content: "";
    background: transparent;
    height: 9px;
    width: 9px;
    display:inline-block;
    padding: 0 0 0 0px;
    margin-left: 3px;
    margin-bottom: 3px
}
#thing:checked + label:before
{
    background: #0080FF;
}

and put the "Remember me" in the label

<input type='checkbox' name='thing' value='valuable' id="thing"/>
<label for="thing">Remember me</label>

The drawback to this, I cannot find a way to put the box and label on one line.

JSFiddle