ASP.NET复选框与自定义设计

Question

有没有办法改变asp.net复选框的样式ui。 我试过这个：

.cabeceraCheckBoxNormal
{
    background:url("../../../ig_res/Default/images/ig_checkbox_off.gif") no-repeat;
    clear:left;
    margin:0;
    padding:0;
}

但结果不是我想要的。因为图像出现在控件附近，我可以看到图像附近的正常样式。 像这样

编辑： 我决定检查生成的html，我看到asp复选框上设置的ID设置为一个span，在这里面是输入类型复选框... 所以我改变了这个风格：

input[type="checkbox"]
{
    background:url("../../../ig_res/Default/images/ig_checkbox_off.gif") no-repeat;
    background-position: 3px 2px;
    display:block;
    clear:left;
    margin:0;
    padding:0;
}

但没有任何反应

Answer 1

到目前为止，获得自定义复选框效果的最佳方法是通过<label>属性添加与复选框关联的for元素。然后隐藏该复选框，并将标签的before伪元素设置为您的复选框。

这样的事情：

<input type='checkbox' id='myCheck'><label for='myCheck'>Magic!</label>

用css：

#myCheck { visibility: hidden; }

input[type=checkbox] + label::before {
    display:block;
    content:url('ig_checkbox_off.gif');
    position:relative;
}
input[type=checkbox]:checked + label::before {
    content:url('ig_checkbox_on.gif');
}

我已经创建了一个jsFiddle示例来演示：http://jsfiddle.net/f9tLemyy/

希望有所帮助。