ASP.NET复选框与自定义设计 [英] ASP.NET checkbox with custom design

问题描述

有任何方法来改变asp.net复选框的样式ui。
我试过这个：

Is there any way to change the style ui of the asp.net checkbox. I tried this:

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

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

but the result is not what i looking for. Because the image appears near the control, and i can see the normal style near the image. Like this

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

I decided to inspect the html generated and I saw that the ID set on asp checkbox is set to a span, and inside this is the input type checkbox... so I change the style to this:

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

但没有任何反应

推荐答案

到目前为止，获得自定义的复选框效果的最好方法是添加一个< label> 属性的。然后隐藏复选框，并在 c>伪元素之前将标签的作为复选框。

By far the best way to get a customised checkbox effect is to add a <label> element linked with the checkbox via the for attribute. Then hide the checkbox and style the label's before pseudo-element as your checkbox instead.

/ p>

Something like this:

<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/

希望有帮助。

这篇关于ASP.NET复选框与自定义设计的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！