How do I hide the borders around checkboxes in an ASP.Net CheckBoxList control with jQuery?

asp.net, css, html, jquery

Solution

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>

Problem

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

Original source