Incorporating CSS styling into a checkbox

As a newcomer to .NET, I apologize if this question seems a bit naive.

I am attempting to create a stylish checkbox using server-side checkboxes instead of the input=checkbox tags:

<div runat="server" id="divCheckBoxContainer" style="padding-top:5px; padding-bottom:5px;" class="divCheckBoxContainer">
  <asp:Label runat="server" ID="Label1" Visible="false" EnableViewState="false" ViewStateMode="Disabled" />
  <asp:CheckBox runat="server" ID="CheckBox1" Width="100%" Height="18px" />
</div>

The label is set to Visible=false because in the code-behind, the content for the ASP checkbox is assigned as an attribute when I utilize the app control:

<uc2:CheckBox runat="server" LabelWidth="450" Width="50" IsAlternatingRow="false" ID="TEST" Label="TEST TEST" />
htmlcssasp.netwebforms

Answer №1

Enhance the control by adding custom attributes:

<ARB:AccessibleCheckbox ID="cstmCB1" Text="Tick for yes" ContainerCssClass="myTB" TabIndex="0" runat="server"></ARB:AccessibleCheckbox>

To access the attribute's value in the code-behind, implement something like this:

<Bindable(True), Category("Appearance"), DefaultValue(""), Localizable(True)>
Property ContainerCssClass() As String
    Get
        Dim s As String = CStr(ViewState("ContainerCssClass"))
        If s Is Nothing Then
            Return String.Empty
        Else
            Return s
        End If
    End Get

    Set(ByVal Value As String)
        ViewState("ContainerCssClass") = Value
    End Set
End Property

You can then utilize it during rendering of the control:

Protected Overrides Sub Render(ByVal writer As HtmlTextWriter)

    Dim currIndent = writer.Indent

    writer.BeginRender()

    writer.AddAttribute(HtmlTextWriterAttribute.Class, Me.ContainerCssClass)
    writer.RenderBeginTag(HtmlTextWriterTag.Div)
    ' (rest of code here)

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

Tips for creating animated card designs with HTML, CSS, and JavaScript

As I delve into the realm of CSS animation, my primary focus is on replicating the captivating card shuffling animation showcased at Here's a glimpse of the progress I've made so far: https://youtu.be/GDIJ2K22cnY While I've successfully im ...

javascripthtmlcssfrontend

Determine if the data in an HTML table should be spanned when it

I'm facing a scenario where my HTML table contains duplicate data in a particular column, as illustrated below I am looking to automatically merge the cells of rows in the HTML table if the data in them is identical, similar to the table displayed be ...

javascripthtmlcssdjango-templates

Creating the Perfect Layout: Unveiling the Secrets of Bootstrap 4

Currently in the process of working on a website, I have encountered a particular challenge regarding the layout design using Bootstrap 4. (Highlighted in Red) https://i.sstatic.net/k8bKv.png The issue at hand is that the first column is a col-md-7 and t ...

htmlcsstwitter-bootstrapbootstrap-4

If element Div is labeled as either A, B, or C, it should smoothly fade out and then fade in as Div

I'm currently working on enhancing the navigation of my portfolio website and I’m facing a challenge in adding additional properties to my toggle() function. This basically involves creating a filter system with four possible options, which are: ...

jqueryhtmlcss

Issue with sorting dates when there is an extra digit in the budget, for example: "02/13/2017 0"

Currently, I am utilizing the tablesorter plugin to sort through my table data. One of the columns in the table contains dates along with an additional badge digit. For instance, "02/13/2017 0". I am specifically interested in sorting this column based o ...

htmlhtml-tabletablesorter

The dropdown menus in Bootstrap are expanding outside the screen when opened

When I click on the dropdown in the Navbar on the right side, the menus open up far to the right and are not visible until I scroll horizontally. Here is the code snippet: <nav class="navbar navbar-expand-lg navbar-light bg-light"> < ...

htmlcssangulartwitter-bootstrap

JavaScript library unsuccessful in transferring data to PHP script

I am facing an issue while trying to transfer variables from javascript to a php file for execution. The problem is that the php file is not being called or executed, even though I have confirmed that it works properly when tested individually. $(function ...

phpjavascriptjqueryhtml

Map region indicator tooltip

I possess a map that contains a specific area with a title. Here is the accompanying code: <map name="Map" id="Map"> <area alt="" shape="rect" coords="127,52,186,71" href="#" title="Extending telephone lines to other Egyptian governorates ...

jqueryhtmlcss

Chrome fails to read font family correctly

I created a jsfiddle that demonstrates an interesting behavior with setting and reading the font-family using jQuery. When I set the font-family to "Arial . . ." it reads back okay, enclosed in a single set of double quotes. However, when I set the font-fa ...

javascriptjquerycssgoogle-chrome

Columns in Bootstrap compressed

Seeking advice regarding setting up a recruitment portal for my employer. Having trouble with the bootstrap scaffolding - columns appear squashed on smaller devices despite using xs columns. Looking for guidance to make it more responsive. Would greatly a ...

htmlcsstwitter-bootstrap

Interactive Dropdown Menu Generation

Despite my expertise in programming languages like MySQL, PHP, JavaScript, jQuery, HTML, and CSS, the current issue I am facing does not relate to any of these. It essentially comes down to three key aspects: Creating a menu layout with clickable link op ...

javascriptjqueryhtmlcssajax

What is the best way to eliminate the dotted border from clickable images?

The client has expressed their dislike for the dotted border, but I believe it is important to keep it for accessibility reasons. However, I suppose I will have to remove it since the client requested it. How should I proceed? ...

htmlcssimage

choose a selection hopscotch

Is there a way to prevent the input field from jumping out of alignment when an option is selected in these q-select inputs? I want to fix this issue so that the field remains in line with the horizontal alignment. https://codepen.io/kiggs1881/pen/RwENYEX ...

cssvue.jsquasar-framework

Adjust CSS to properly position links alongside details summary

Currently enhancing my Hugo site (repository link is here). I am aiming to integrate a details element alongside anchors, maintaining a consistent style. The desired layout is depicted in the initial screenshot where "abstract" serves as the details elemen ...

htmlcsshugo

Ajax immediately going to the error section

I'm having trouble with my ajax as it always goes straight to the error part. Below is my code along with comments on the lines I'm unsure about: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script&g ...

javaphphtmlajax

Achieving consistent spacing between elements within a column in Bootstrap 5

Picture a bootstrap column filled with various elements such as divs, paragraphs, and links. How can I evenly space these elements inside the column without using margins or padding? I am looking for an automatic way for the elements to be spaced equally a ...

htmlcssbootstrap-5

The content spilling out of a Bootstrap 4 row

UPDATE: Here is the link to the javascript fiddle When the text on the screen becomes too large for the row, it overlaps onto other rows instead of increasing the height of the row. This could be due to setting the row heights as a percentage value in ord ...

htmlcsstwitter-bootstraptwitter-bootstrap-4

What are some ways to prompt electron to refresh its rendering with updated CSS?

I am currently in the process of developing my first Electron app on Windows 10, using Visual Studio Code and Git Bash as my primary tools. However, I have encountered a frustrating issue where my app has suddenly stopped updating based on css changes. Spe ...

cssnode.jselectronbrowser-cache

Invoke a jQuery function in the parent page using regular JavaScript from an iframe

I have successfully created an iframe using regular javascript. Inside the iframe is a Jquery function along with JQuery itself and it functions correctly within the iframe. However, I am now looking to execute this function from the parent page instead of ...

javascriptjqueryhtml

Steps to align table next to the paragraph tag

I am facing an issue trying to align a table inline with the p tag in my HTML code. I have attempted to make minimal changes to achieve this, but it is not working as expected. Here is the code I have tried: <p>ABCD</p> <table style = displ ...

htmlcss