我需要去掉由 CheckBox 控件呈现的各个复选框周围的边框。现在看起来是这样的:
ASP.Net 标记很简单:
<asp:CheckBoxList ID="cblEthnicity" runat="server" RepeatDirection="Vertical"
RepeatColumns="3" RepeatLayout="Table" BorderStyle="None" BorderWidth="0">
</asp:CheckBoxList>
它位于具有该类的表格的单元格中formTable
应用(见下文)。
正如你所看到的,我尝试设置属性BorderStyle="None"
and BorderWidth="0"
没有效果。
我很确定这背后是下面的CSS,它在封闭的表格单元格周围放置了圆角边框,我想保留它:
.formTable
{
background-color: #eeeeee;
border: solid 1px #bbbbbb;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
.formTable tr, .formTable tr td, .formTable tr th
{
background-color: #eeeeee;
padding: 3px;
border: solid 1px #bbbbbb;
vertical-align: top;
}
我添加了以下 CSS,但它也没有执行任何操作:
.formTable tr td input[type="checkbox"]
{
border: none;
}
最后,从 .aspx 呈现的 CheckBoxList 的 HTML,如 Chrome DevTools 中所示,如下所示(为了简洁而进行了一些编辑):
<table id="main_cblEthnicity" style="border-width:0px; border-style:None; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<tbody>
<tr>
<td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
<input id="main_cblEthnicity_0" type="checkbox" name="ctl00$main$cblEthnicity$0"
checked="checked" value="Native American" />
<label for="main_cblEthnicity_0">Native American</label>
</td>
...
</tr>
</tbody>
</table>
关于如何消除不需要的边框有什么建议吗?
UPDATE:以下是一些图片,可以让您更清楚地了解正在发生的事情以及我想要完成的任务:
这就是我现在得到的:
如果我使用迄今为止提出的任何建议,我会得到以下结果:
这就是我想要实现的目标:
除了这里提出的建议之外,我尝试将其添加到 CSS 中,但没有什么区别:
.formTable tr td > input[type="checkbox"] {
border: none;
}
我也在 Javascript/jQuery 中尝试过:
<script type="text/javascript">
$(document).ready(function() {
$('.formTable tr td > input[type="checkbox"]').removeAttr("border");
});
</script>