Is there a browser agnostic way to increase a checkbox's size without changing HTML markup?

Question

Is there a browser agnostic way to increase a <input type="checkbox">'s size without changing HTML markup ?

I tried to change height and width in the CSS but the problems is that in Firefox the checkbox gets pixelated. In Opera only the logic size of the input increases, not the visual.

Should I use a <label> and :before pseudo selectors to make it look nice and big, what are the alternative solutions?

Trying to avoid JavaScript if possible.

Answer 1

You are right in your assumption, cross-browser support is inconsistent. If you want bulletproof customization you will want to write your own solution.

Personally, I would look at solutions used by major css frameworks such as Bootstrap and Foundation.

From one of the links:

label input[type="checkbox"]{ display: none; }

label input[type="checkbox"]:checked + .cr > .cr-icon{
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

label input[type="checkbox"] + .cr > .cr-icon{
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<label>
    <input type="checkbox" value="" checked="">
    <span class="cr"><i class="cr-icon fa fa-check"></i></span>
    Click Me
</label>

label input[type="checkbox"]{ display: none; }

label input[type="checkbox"]:checked + .cr > .cr-icon{
    transform: scale(1) rotateZ(0deg);
    opacity: 1;
}

label input[type="checkbox"] + .cr > .cr-icon{
    transform: scale(3) rotateZ(-20deg);
    opacity: 0;
    transition: all .3s ease-in;
}

.cr-icon {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.cr-icon:before {
    content: "\2713";  
}

<label>
    <input type="checkbox" value="" checked="">
    <span class="cr"><i class="cr-icon"></i></span>
    Click Me
</label>