How to hide borders around checkboxes in ASP.NET CheckBoxList control using jQuery?

Question

I need to get rid of the borders around the individual checkboxes that are displayed by the CheckBox control. Here's what it looks like now:

ASP.Net markup is simple:

<asp:CheckBoxList ID="cblEthnicity" runat="server" RepeatDirection="Vertical"
  RepeatColumns="3" RepeatLayout="Table" BorderStyle="None" BorderWidth="0">
</asp:CheckBoxList>

which is in the cell in the table with the applicable class formTable(see below).

As you can see, I tried to adjust the attributes BorderStyle="None"and BorderWidth="0"the lack of effect.

I am sure that the following CSS is behind this, which places rounded border frames around the closing cells of the table that 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 obtained from .aspx for CheckBoxList, as shown in Chrome DevTools, looks like this (slightly edited 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>

, ?

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>

Answer 1

input, td. :

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

, , CSS-:

.formTable tr td
{
    border:0;
}

, td, tr th

, . , . , - , , , td.

, . :

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

HTML- , . TDs , . , , TD ( ). :

, 2 HTML: CSS jQuery.

CSS

, ( ) : style="border:0" style="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;". CSS,

.no-borders {
    border:0;
}

td, .

jQuery

<script type="text/javascript">
  $(document).ready(function() {
    $('.formTable input[type="checkbox"]').parent().css('border','none');
  });
</script>

Answer 2

, , -, - Check .formTable CheckBoxList. border: solid 1px #bbbbbb; :

.formTable tr, .formTable tr td, .formTable tr th
{
  background-color: #eeeeee;
  padding: 3px;
  vertical-align: top;
}

: http://jsfiddle.net/pgpR3/1/