Trouble with applying CSS class to checkboxlist

I am trying to display a border around each checkbox item in a checkboxlist. I believe that it can be achieved by setting the td cssclass as the checkboxlist saves items in td. However, the code I tried below is not working.

Here is the ASPX code:

<style type="text/css>
     .chkboxlist td
     {
         font-size: large;
         background-color: Green;
         border-color: Red;
         color: black;
     }
</style>
<asp:CheckBoxList ID="chkCompanies" RepeatDirection="Vertical" CellSpacing="5" CellPadding="5" runat="server" CssClass="chkboxlist"></asp:CheckBoxList>

And here is the ASPX.cs code:

chkCompanies.DataSource = dtCompanyList;
            chkCompanies.DataTextField = "Emp_Company";
            chkCompanies.DataBind();

The CSS Class is placed in the head section of the ASPX code. Any suggestions on how to make this work?

c#cssasp.netcheckboxlist

Answer №1

"In my understanding, utilizing td as the cssclass for checkboxlist saves items in td should be feasible" - This statement is incorrect.

When you use .chkboxlist td as the CSS selector, it does not target the asp:CheckBoxList element because it is not a <td> element.

To resolve this issue, simply remove the td selector:

<style type="text/css">
      .chkboxlist
      {
          font-size: large;
          background-color: Green;
          border-color: Red;
          color: black;
      }
</style>

If you wish to change the border of each individual CheckBox, you can do so in the code-behind within the OnDataBound event:

foreach (ListItem li in chkCompanies.Items)
{
    li.Attributes.Add("Style", "border: solid 1px black;");
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using ValidationGroup to trigger JavaScript calls from controls

Is it possible to trigger a JavaScript function from the "onclientclick event" of a button that has a ValidationGroup assigned? <asp:Button ID="btnTest" runat="server" Text="Test" OnClick="btnTest_Click" ValidationGroup="Valid ...

asp.netjavascript

What are some strategies to avoid serializing or deserializing a member of a specific type that cannot be modified?

An issue arises when attempting to deserialize RecurrenceInfo within a large project: Newtonsoft.Json.JsonSerializationException: Cannot populate list type DevExpress.XtraScheduler.CustomFieldCollection at Newtonsoft.Json.... <<< omitted 20 Ne ...

c#jsonserializationjson.netdevexpress

Customizing Mat Horizontal Stepper Icons with Unique Background Colors in Angular Material

I'm having trouble customizing the colors of the icons In my mat-horizontal-stepper, I have five mat-steps (Part A, Part B ... Part E), each needing a different color based on certain business rules. While I can change the color for all steps or the ...

cssangulartypescriptangular-materialangular-material-stepper

Unable to retrieve stored procedure using Devart LinqConnect

I've set up a Devart LinqConnect model named Shopping Context, utilizing MySQL as the database. Currently, I am using a trial version of LinqConnect. Within the database, I have created a stored procedure called clothingItems. However, when attemptin ...

c#asp.netstored-proceduresdevart

Finding the xPath for a particular line within a node that contains more than one line of text

My HTML code resembles the following structure: <div class='textContainer'> <div class='textLabel'> </div> <div class='text'> "First Line of text" "Second Line of text" "Thir ...

htmlcssxpath

Enhance your title bar with an eye-catching image

Is there a way to add an image to the title bar? I currently have the title set as "Webnet". I attempted to combine it with a FontAwesome Glyphicon's icon image like this: <title><i class="icon-user icon-black"></i>Webnet</titl ...

htmlcssfaviconfont-awesomeglyphicons

Dealing with content extending into the previous column within CSS columns

I used this code pen example to perfectly illustrate the concept. To demonstrate, I applied the following CSS code. Try hovering over the second card in the top row. .custom-hover:hover { transform: scale(1.5); } In essence, when the top element of a ...

cssbootstrap-4

Exposing a ComplexType with ODataModelBuilder in Web API using OData

I am currently working with two entities (Orders and Products) that I have exposed as OData using ODataModelBuilder. Within the Order entity, there is a complex type called Status. Is there a way to expose the Status complex type? ODataModelBuilder _model ...

c#asp.netasp.net-web-apiodata

Guide on incorporating a JS file in a React application

I recently obtained a template for my website that includes the following JS file which is being called from my React component. !(function($) { "use strict"; // Hero typed if ($('.typed').length) { var typed_strings = $(&quo ...

javascriptcssreactjsreact-nativenodes

Tips for dividing the WordPress header navigation horizontally using separate PHP files

I am trying to customize my WordPress menu navigation by splitting it into two sections: left and right. I have added the menu function in the "functions.php" file to create the menu from the backend, and the frontend modifications will be done in the "hea ...

phpcsswordpressheadernavigation

Steps for adding a stroke to just the left and right sides of an SVG wave:

How do I apply a stroke only to the right and left sides of an SVG (specifically a wave SVG)? <svg class="defs-only" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="wave"> <svg viewBox="0 0 100 50" ...

htmlcsssvg

Insert the JSON string into the Visual Studio program

Currently, I am in the process of running C# Unit Tests on Visual Studio and utilizing JSON strings that were directly copied from my database. An example of this JSON string looks like: { "key" : "Foo", "format" : "Bar" } The task at hand is t ...

c#jsonvisual-studiovisual-studio-2012

What might be causing the invisibility of a particular div element?

Here is the layout in the div element: <div class=" wrap clear"> <div class="block pink float"></div> <div class="block blue float"></div> <div class="block orange float"& ...

htmlcss

Is the button not aligned properly with the email input field?

<div class="subscribe__form--action--btn"> <form action="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="32545b5e5b5746545C5B5356477F54585850"> </a>" meth ...

htmlcssbutton

Encoding an image within a dataTable using DataContractJsonSerializer

Currently, I am using DataContractJsonSerializer to serialize a DataTable and pass it as JSON in C#. The issue I am encountering is that all fields are being serialized as strings. While FirstName and LastName are correct, the Picture field is being serial ...

c#jsonwcf

Uncovering the Depths of Dynamic Crawler Lists in Asp.net Request.Browser

I recently discovered why Request.Browser.Crawler is always false in C# (). Is there a method that anyone uses to dynamically update the list of Crawlers, making Request.Browser.Crawler truly useful? ...

c#asp.netweb-crawler

Is it possible to place two identical canvases on top of each other beside a separate canvas?

Trying to arrange two same-sized canvas elements on top of each other and next to a third canvas. In the figure below, I aim to have 2 and 3 positioned together, adjacent to 1. https://i.stack.imgur.com/dWkhc.png Attempting to address this issue with the ...

csshtmlcanvas

Tips for wrapping a div element around another div at the top left corner

I am working with a particular layout. <div class="comment"> <div class="leftpart"> </div> <div class="rightpart"> </div> </div> When viewing on a desktop, I maintain the original styling where each div is in its own s ...

htmlcss

Input Fields Will Not Resize Correctly in Some Browsers

When resizing a browser, the input fields do not resize properly and end up overlapping each other in the middle, causing distortion before the media script adjusts everything to 100%. The width of the text area set to 100% does not align with the forms. F ...

htmlcss

Tips for creating a breakpoint in Sass specifically for a 414px iPhone screen size

For my latest project, I am utilizing sass and looking to incorporate a sass breakpoint or media query. My goal is to have the code execute only if the screen size is 414px or less. Below is my existing code: @include media-breakpoint-down(sm) { .sub-men ...

javascriptphphtmlmysqlcss