如何隐藏在复选框在ASP.Net的CheckBoxList控件与jQuery的边框？ [英] How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?
问题描述
我需要摆脱由CheckBox控件呈现的各个复选框周围的边框。现在的样子如下：
ASP.Net标记很简单：
; asp：CheckBoxList ID =cblEthnicityrunat =serverRepeatDirection =Vertical
RepeatColumns =3RepeatLayout =TableBorderStyle =NoneBorderWidth =0>
< / asp：CheckBoxList> code <$ c $>
正如你可以看到的，我已经尝试设置属性 BorderStyle =None
和 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_cblEthnicitystyle = -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_0type =checkboxname =ctl00 $ main $ cblEthnicity $ 0
checked =checkedvalue =Native American/>
< label for =main_cblEthnicity_0>美洲原住民< / 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>
解决方案问题不是 input ，但在 td 。
Look：
< td style =border-top-left-radius：5px; border-top- right-radius：5px; border-bottom-left-radius：5px; border-bottom-right-radius：5px;>
这里（上面）定义了边界半径。这里（下面）边框颜色：
.formTable tr，.formTable tr td，.formTable tr th
{
background-color：#eeeeee;
padding：3px;
border：solid 1px #bbbbbb;
vertical-align：top;
}
因此，要改变这一点，代码，这：
.formTable tr td
{
border：0;
}
这样，你只需要使 td 边框消失，而不是 tr 或 th的边框
OP的澄清后更新
哦，没关系。现在有了这些新的截图，我们可以很好地看到你试图做什么实现。
无论如何，你仍然在尝试从输入中删除边框，但我重复，问题不是输入，而是td。
我会用你给我们的代码解释一下吗？所以：
< table id =main_cblEthnicitystyle =border-width：0px; border-style： -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_0type =checkboxname =ctl00 $ main $ cblEthnicity $ 0
checked =checkedvalue =Native American/>
< label for =main_cblEthnicity_0>美洲原住民< / label>
< / td>
...
< / tr>
< / tbody>
< / table>
这是表格中所有复选框内的HTML代码 。所有它的TD有圆形的边框和我们已经知道的东西。此表中包含所有这些复选框位于较大的TD（您要保留的边框）内。
现在你有两种方式
CSS方法
很简单，你可以想要在这些表格单元格（其中有复选框）中添加内联样式，如下所示： style =border：0而不是 style = -top-left-radius：5px; border-top-right-radius：5px; border-bottom-left-radius：5px; border-bottom-right-radius：5px;。
.no-borders {
border：0;
}
并应用于您不想看到的每个td。 p>
jQuery方式
< script type =text / javascript >
$（document）.ready（function（）{
$（'。formTable input [type =checkbox]'）parent（）css（'border'，'none'）;
}）;
< / script>
I need to get rid of the borders around the individual checkboxes that are rendered by a CheckBox control. Here's what it looks like now:
The ASP.Net markup is straightforward:
<asp:CheckBoxList ID="cblEthnicity" runat="server" RepeatDirection="Vertical"
RepeatColumns="3" RepeatLayout="Table" BorderStyle="None" BorderWidth="0">
</asp:CheckBoxList>
which is in a cell in a table with the class formTable applied (see below).
As you can see, I've tried setting the attributes BorderStyle="None" and BorderWidth="0" to no effect.
I'm pretty sure that what's behind this is the following CSS, which puts rounded corner borders around the enclosing table cells, which I want to keep:
.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;
}
I added the following CSS, which also did nothing:
.formTable tr td input[type="checkbox"]
{
border: none;
}
Finally, the HTML rendered from the .aspx for the CheckBoxList, as seen in Chrome DevTools, looks like this (edited a little for brevity):
<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>
Any suggestions on how I can get rid of the unwanted borders?
UPDATE: Here are some images to make it more clear what's going on and what I'm trying to accomplish:
This is what I'm getting now:
This is what I get if I use either suggestion that has been presented so far:
This is what I'm trying to achieve:
In addition to the suggestions made here, I tried adding this to the CSS, but it made no difference:
.formTable tr td > input[type="checkbox"] {
border: none;
}
I also tried this in Javascript/jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('.formTable tr td > input[type="checkbox"]').removeAttr("border");
});
</script>
解决方案 The problem isn't the input but in it's td.
Look:
<td style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;">
Here (above) is defined the border radius. And here (below) the border color:
.formTable tr, .formTable tr td, .formTable tr th
{
background-color: #eeeeee;
padding: 3px;
border: solid 1px #bbbbbb;
vertical-align: top;
}
So, to change this, you may want to add just after the above CSS code, this:
.formTable tr td
{
border:0;
}
Doing this, you'll just make the td borders to disappear and not the borders of tr or th
UPDATE AFTER OP's CLARIFICATIONS
Oh, all right. Now with those new screenshots we can see well what you're tryning to do achieve.
Anyway, you're still trying to remove a border from the input, but I repeat, the problem isn't the input but it's td.
I'll explain you with the code you gave us ok? So:
<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>
This is the HTML code of the table that has inside all those checkboxes. All it's TDs have rounded borders and stuff we already know. This table that has inside all those checkboxes is inside a bigger TD (which borders you want to keep) W're in the following situation:
So now you got 2 ways to act without changing all your HTML: CSS or jQuery.
The CSS way
Pretty simple, you may want to put inline style at those table cells (which have checkboxes inside) like this: style="border:0" instead of style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;". Or Just create a new CSS class like this
.no-borders {
border:0;
}
and apply it on every td you don't want to see.
The jQuery way
<script type="text/javascript">
$(document).ready(function() {
$('.formTable input[type="checkbox"]').parent().css('border','none');
});
</script>
这篇关于如何隐藏在复选框在ASP.Net的CheckBoxList控件与jQuery的边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
