Change the css styling of a checkboxlist in table ASP.NET

I would like to change the css styling of my checkbox in to the same styling has the one on w3school However i do not know how to get it to work.

Here is my ASP.NET code.

<asp:Table ID="checkListTable" runat="server" Width="100%" > 
            <asp:CheckBoxList ID="chklisttest" runat="server"  RepeatLayout="table" RepeatColumns="6" RepeatDirection="vertical"/></asp:TableCell>

Thank you for your help.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

You need to create an Adapter for this. First, add the following code to your project somewhere.

using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.Adapters;

public class CheckBoxListAdapter : WebControlAdapter
    protected override void Render(HtmlTextWriter writer)
        var targetControl = (CheckBoxList)Control;
        int itemCounter = 0;

        if (targetControl == null)

        foreach (ListItem item in targetControl.Items)
            var inputId = targetControl.ClientID + "_" + itemCounter++;

            writer.AddAttribute("class", "container");

            writer.AddAttribute("type", "checkbox");
            writer.AddAttribute("value", item.Value);
            writer.AddAttribute("name", targetControl.UniqueID + "$" + (itemCounter - 1));
            writer.AddAttribute("id", inputId);

            if (item.Selected)
                writer.AddAttribute("checked", "checked");
            if (!targetControl.Enabled || !item.Enabled)
                writer.AddAttribute("disabled", "disabled");


            //span label
            writer.AddAttribute("class", "checkmark");

            //end label

            //horizontaal of verticaal
            if (targetControl.RepeatDirection == RepeatDirection.Vertical)
                writer.Write("<br />");

            //register item for postback
            Page.ClientScript.RegisterForEventValidation(targetControl.UniqueID, item.Value);

        //register for postback

Then add a “ASP.Net folder” by right clicking on your project you will find under “Add” > “Add ASP.Net folder”. There add a “App_browser” folder.
In that created folder add a “BrowserFile.browser” file. Put the following code in there

  <browser refID="Default">
      <adapter controlType="System.Web.UI.WebControls.CheckBoxList" adapterType="TestOmgeving.CheckBoxListAdapter" />

Now a CheckBox will render as

<label class="container">This is the label
    <input type="checkbox" value="val" name="ctl00$mainContentPane$CheckBoxList1$1" id="mainContentPane_CheckBoxList1_1">
    <span class="checkmark"></span>

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply