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

如果您习惯使用一点Javacript / jQuery，那么您可以在运行时添加label并应用相同的CSS。您还不需要::before或::after伪元素。

例如，在文档就绪时找到所有复选框，然后在每个复选框后面添加一个标签。请务必将复选框id分配给标签的for属性。像这样：

$("input[type=checkbox]").each(function() {
    var $lbl = $("<label>");
    $lbl.attr("for", this.id);
    $(this).after($lbl);
});

注意： 此方法的好处是您可以重复使用现有的CSS。无需改变任何东西。我想这就是你想要的问题。

演示小提琴：http://jsfiddle.net/abhitalks/pdczc9vo/2/

<强> 段：

＆＃13;

$("input[type=checkbox]").each(function() {
    var $lbl = $("<label>");
    $lbl.attr("for", this.id);
    $(this).after($lbl);
});

＆＃13;

input[type=checkbox] {
    display: none;
}
input[type=checkbox] + label {
    display: inline-block;
    width: 16px; height: 16px;
    border: 1px solid gray;
    background-color: #eee;
    cursor: pointer;
    margin: 0px 8px;
}
input[type=checkbox]:checked + label {
    background-color: #dd6666;
}
input[type=checkbox] + label:hover {
    background-color: #ccc;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="chk1" />
<input type="checkbox" id="chk2" /> 
<input type="checkbox" id="chk3" /> 
<input type="checkbox" id="chk4" />

＆＃13;

Answer 2

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

2 个答案: