样式复选框，在选中时将背景颜色设置为窗口内的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>

我已经制作了一些图片，让您可以看到它的外观和我所尝试实现的目标。

这是未被选中时的状态。

这是选中时的情况。

这就是我想要创建的东西。

有人能看到吗，或者有什么我可以尝试的东西吗？

- Mikkel

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%);
}

请确保在 input[type="checkbox"]:checked 样式中添加position: relative，以使其在复选框内居中显示。

这里是一个有效的演示。

- Hunter Turner

---

看，这正是我在寻找的。非常感谢你的帮助，祝你新年快乐。 - Mikkel

没问题！很高兴能帮忙！ :) - Hunter Turner

我有点完美主义，所以我喜欢使用变换，因为它可以得到一个精确的中心。如果你在代码编辑器中将其更改为25％，你会发现居中有些偏差。 - Hunter Turner

不，有点偏差，但是这就是为什么我的解决方案更适合精确居中的原因。如果您将内部框变小（比如说10x10而不是15x15），并按照您的方式进行操作，它将无法居中。只有当内部框恰好是包含框的一半大小时，您的方法才有效。这是您的解决方案所做的事情：https://jsfiddle.net/pkaL4185/ - Hunter Turner

因为在他的代码中，他将 input[type="checkbox"]:focus 的 box-shadow 属性设置为none... - Hunter Turner