Question

我正在尝试使复选框看起来像我网站上的其他按钮：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"> 当我测试它时，它看起来就像普通的默认复选框。编辑：已修复，忘记了制作复选框隐身

Answer 1

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

Answer 2

在正在加载的CSS文件中，实际上没有关于输入类型=“复选框”的CSS，因此没有样式应用于复选框，只有其他输入区域。

Answer 3

样式复选框可能是纯CSS的痛苦。对于jQuery解决方案，请尝试Prettycheckable（http://arthurgouveia.com/prettyCheckable/）

复选框CSS不起作用

3 个答案: