css - 样式复选框，在窗口内将选中的背景颜色设置为 70%

Question

我可以在复选框字段的样式方面使用一些帮助。现在，我自己制作了一些自定义 css，效果很好。现在我只需要在复选框窗口中有一个选中的标记。

到目前为止的代码:

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 代码:

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

制作了一些图片，以便您可以看到它的外观......以及我正在努力实现的目标。

这是它没有检查的时候。



这是它检查的时候。



这就是我试图创造的。



任何人都可以看到，或者有什么我可以尝试的吗？

Answer 1

您可以尝试使用 :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 .