我想自定义我的复选框。我一直看到这种自定义方法:
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()">
有什么想法吗? 我敢肯定这很简单,我很抱歉提前..
谢谢。
最佳答案
您可以将 :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" />
关于javascript - 更改没有标签的复选框背景,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27150480/