javascript - 更改没有标签的复选框背景

Question

我想自定义我的复选框。我一直看到这种自定义方法:

input[type=checkbox] {
    display:none;
}

.my_label {
    display: inline-block;
    cursor: pointer;
    font-size: 13px; 
    margin-right:15px;
    margin-bottom:8px;
    line-height:18px;
}

.my_label:before {
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    background-image: url("images/checkbox-bg.gif");
}

input[type=checkbox]:checked + .my_label:before {
    background: url("images/checkbox-checked-bg.gif");
    font-size: 15px;
}

没关系，当我们有这个:

<input type="checkbox" id="my_checkbox"> <label for="my_checkbox" class="my_label">

但是在我的代码中我需要没有标签的 atm。只有 1 个复选框，不依赖于任何东西。就是这样:

<input class="my_checkbox_class" id="my_checkbox_id" onclick="my_function()">

有什么想法吗？我敢肯定这很简单，我很抱歉提前..

谢谢。

Answer 1

您可以将 :before 和 :after 伪样式应用于复选框本身，而不是隐藏该框，只需将其宽度设置为 0:

input[type=checkbox] {
    width:0px;
    margin-right:25px;
}

input[type=checkbox]:before {
    content: "";
    width: 15px;
    height: 15px;
    display: inline-block;
    vertical-align:middle;
    text-align: center;
    box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
    background-color:#ccc;
}

input[type=checkbox]:checked:before {
    background-color:red;
    font-size: 15px;
}

<input type="checkbox" />
<input type="checkbox" />
<input type="checkbox" />