我需要帮助来处理我的复选框样式。目前,我自己编写了一些自定义的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>
我已经制作了一些图片,让您可以看到它的外观和我所尝试实现的目标。
这是未被选中时的状态。
这是选中时的情况。
这就是我想要创建的东西。
有人能看到吗,或者有什么我可以尝试的东西吗?
input[type="checkbox"]:focus
的box-shadow
属性设置为none
... - Hunter Turner