具有自定义设计的 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 设置为一个跨度，里面是输入类型复选框...所以我将样式更改为:

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/

希望对您有所帮助。