0

我正在尝试使复选框看起来像我网站上的其余按钮：pencilfactorygames.com/createaccount.html 这是我的 CSS：

input[type="checkbox"]{
    display:none;
}
input[type="checkbox"] + label {
    background: -webkit-linear-gradient(top, #222 50%, #111 50%);
    border-radius: 5px;
    color:#FFF;
    display:inline-block;
    width:19px;
    height:19px;
    margin:-1px 4px 0 0;
}
input[type="checkbox"]:checked + label {
    background: -webkit-linear-gradient(top, #0F0 50%, #F00 50%);
}

这是我的html：<input type="checkbox" name="ToS"> 当我测试它时，它看起来就像普通的默认复选框。编辑：固定，忘记使复选框不可见

4

3 回答 3

1

您可以通过隐藏真正的复选框输入并将其替换为它的图形表示来设置复选框的样式，该图形表示可以使用 javascriptonclick();方法选中/取消选中，并将选中状态设置为正确的复选框输入。

于 2013-09-27T13:53:57.920 回答
0

在正在加载的 CSS 文件中，实际上没有关于 input type = "checkbox" 的 CSS，因此没有将样式应用于复选框，只有其他输入区域。

于 2013-09-26T22:58:10.253 回答
0

使用纯 CSS 设置复选框样式可能会很痛苦。对于 jQuery 解决方案，请尝试 Prettycheckable ( http://arthurgouveia.com/prettyCheckable/ )

于 2013-09-27T13:52:38.280 回答