具有自定义设计的 ASP.NET 复选框

【问题标题】：ASP.NET checkbox with custom design具有自定义设计的 ASP.NET 复选框
【发布时间】：2012-02-12 12:39:54
【问题描述】：

有没有办法改变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;
}

但什么也没发生

【问题讨论】：

Change Style/Look of Asp:CheckBox using CSS的可能重复
复选框取决于浏览器。我尝试了一些像设置边框这样简单的方法，发现它只适用于几个浏览器。您可以在
中嵌入复选框并进行装饰。
查看以下链接http://www.thecssninja.com/css/custom-inputs-using-css Demo

标签： asp.net css

【解决方案1】：

到目前为止，获得自定义复选框效果的最佳方法是通过for 属性添加与复选框链接的<label> 元素。然后隐藏复选框并将标签的 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/

希望对您有所帮助。

【讨论】：

您可以通过这种方式设置复选框的样式，当然 - 但如果您将 runat=server 添加到复选框元素中（以将其放入服务器端代码），则单击时图像不会被替换复选框。当服务器持有控件时，它只检查/取消选中控件是否可见。