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

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

但没有任何反应

解决方法

到目前为止,获得自定义复选框效果的最佳方法添加< label>通过for属性与复选框链接的元素.然后隐藏复选框并将伪元素之前的标签样式设置为复选框.

像这样的东西:

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

希望有所帮助.

相关文章

### 创建一个gRPC服务项目(grpc服务端)和一个 webapi项目(...
一、SiganlR 使用的协议类型 1.websocket即时通讯协议 2.Ser...
.Net 6 WebApi 项目 在Linux系统上 打包成Docker镜像,发布为...
一、 PD简介PowerDesigner 是一个集所有现代建模技术于一身的...
一、存储过程 存储过程就像数据库中运行的方法(函数) 优点:...
一、Ueditor的下载 1、百度编辑器下载地址:http://ueditor....