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.
This is when its checked.
This is what I'm trying to create.
Can any see, or have something I can try?
Aucun commentaire:
Enregistrer un commentaire