当前位置:  开发笔记 > 前端 > 正文

样式复选框,将选中的背景色设置为窗口内的70%

如何解决《样式复选框,将选中的背景色设置为窗口内的70%》经验,为你挑选了0个好方法。

我可以对复选框字段的样式使用一些帮助。现在,我自己做了一些自定义的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代码:

@Html.CheckBoxFor(m => m.RememberMe, new { @class = "sbw_checkbox" }) @Html.LabelFor(m => m.RememberMe, new { @class = "sbw_label" })

做了一些图片,以便您可以看到它的外观..以及我要达到的目标。

这是未检查的时间。

这是其检查时。

这就是我要创建的。

可以看到任何东西,或者可以尝试吗?

推荐阅读
携手相约幸福
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有