How Do I Hide The Borders Around Checkboxes In An Asp.net Checkboxlist Control With Jquery?

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: &l

Solution 1:

The problem isn't the input but in it's td. Look:

<tdstyle="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:

.formTabletr, .formTabletrtd, .formTabletrth
{
    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:

.formTabletrtd
{
    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:

<tableid="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><tdstyle="border-top-left-radius:5px; border-top-right-radius:5px; border-bottom-left-radius:5px; border-bottom-right-radius:5px;"><inputid="main_cblEthnicity_0"type="checkbox"name="ctl00$main$cblEthnicity$0"checked="checked"value="Native American" /><labelfor="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

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

Solution 2:

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:

.formTabletr, .formTabletrtd, .formTabletrth
{
  background-color: #eeeeee;
  padding: 3px;
  vertical-align: top;
}

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