样式复选框，将背景色设置为选中的70%

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.

我可以在我的复选框字段的样式上使用一些帮助。现在，我自己做了一些自定义的css，它运行得很好。现在我只需要在复选框窗口中有一个选中的标记。

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:

Html代码:

<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?

我能试试吗?

1 个解决方案

#1

You can try adding some styles using :before

您可以尝试添加一些样式:before。

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

Make sure to also add position: relative to the input[type="checkbox"]:checked style so that it will center within the checkbox.

确保还添加了位置:相对于输入[type="checkbox"]:勾选样式，以便它在复选框中居中。

Here is a working fiddle.

这是一个工作小提琴。

#1