Add gap between outer and inner border of checkbox-CodePudding

I'm styling a bunch of form elements and need to customize the style of the checkbox. It needs to look like this when checked:

The closest I can get to that is as you see here:

I've tried using background-size:50%; at line 24 of the CSS in the fiddle.

How do I create the gap between the inner and outer square of the checkbox?

CodePudding user response：

There are many ways how to do it, for example

input[type='checkbox'] {width: 18px; height: 18px; border: 1px solid #ccc; position: relative; margin: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; vertical-align: text-bottom;}
input[type='checkbox']:before {content: ''; position: absolute; top: 2px; left: 2px; background: #ccc; width: 12px; height: 12px;}

input[type='checkbox']:checked {border-color: blue}
input[type='checkbox']:checked:before {background: blue}

<label>
    <input type="checkbox">
    Checkbox 1
</label>
<label>
    <input type="checkbox">
    Checkbox 2
</label>