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

user_1299152 0
Viewed 4780

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:

Image with checkbox borders

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:

Incorrect - borders around individual checkbox cells

This is what I get if I use either suggestion that has been presented so far:

Incorrect - no borders around the table cells

This is what I'm trying to achieve:

Correct - borders around the table cells, but not around the checkboxes within

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>
css asp.net html jquery
2 Answers

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:

Table TDs

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

Your code isn't showing it, but apparently at some point class .formTable is being assigned to the CheckBoxList. Just remove border: solid 1px #bbbbbb; from the second class declaration: 

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

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

user_9616950
Related