Style, set the background color to 70% inside the window

Question

I could use some help in styling my checkbox field. Right now, I made some own css myself, and it works very well. Now I just have to have a checked label inside the check box.

Code:

input[type=checkbox] {
    -webkit-appearance: none;
    appearance: none;
    width: 30px; /*Desired width*/
    height: 30px; /*Desired height*/
    cursor: pointer;
    border: 1px solid #CCC;
    border-radius: 2px;
    background-color: #fcfbfb;
    display: inline-block;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
    color: black;
    box-sizing: content-box;
}

input[type="checkbox"]:checked {
    background-color: #002B45;
    border-radius: 2px;
    border: 1px solid #CCC;
    box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.05);
    color: black;
    cursor: pointer;
}

input[type="checkbox"]:focus {
    outline: 0 none;
    border-radius: 2px;
    box-shadow: none;
}

HTML code:

<div class="column small-12">
  <div class="checkbox">                             
    @Html.CheckBoxFor(m => m.RememberMe, new { @class = "sbw_checkbox" })
    @Html.LabelFor(m => m.RememberMe, new { @class = "sbw_label" })
  </div>  
</div>

Took a few shots so you can see how it looks. And what I'm trying to achieve.

This is when it is not verified.

This is when they checked it.

This is what I am trying to create.

Can I see or try something that I can try?

Answer 1

You can try adding some styles using :before

input[type="checkbox"]:checked:before {
    content: '';
    background: #002B45;
    position: absolute;
    width: 15px;
    height: 15px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

position: relative input[type="checkbox"]:checked, .

fiddle.