mercredi 30 décembre 2015

Style checkbox , set background color on checked to 70% inside the window

I could use some help with the styling of my checkbox field. Right now, I made some custom css myself, and it work very well. Now I just need to have a checked mark inside the checkbox window.

Code so far:

    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>

Have made some pictures so you can see how it looks.. and what I'm trying to achive.

This is when its not checked.

Not checked

This is when its checked.

enter image description here

This is what I'm trying to create.

enter image description here

Can any see, or have something I can try?




Aucun commentaire:

Enregistrer un commentaire