remove css class in code behind

Question

I have this control

<asp:Label ID="lblName" runat="server" Text="My Name" CssClass="required regular" />

I want to remove the required class from code behind, how can I do that?

jpiolho · Accepted Answer · 2010-12-02 09:52:34Z

73

You can replace "required" with an empty string:

lblName.CssClass = lblName.CssClass.Replace("required", "");

answered Dec 2, 2010 at 9:52

jpiolho

1,21212 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

FreeAsInBeer Over a year ago

Simple, and likely error prone. Say you have a CSS class list like "dialog authentication-dialog modal" and you remove the "dialog" class. Using the code from this answer you end up with " authentication- modal".

Craig Waddington Over a year ago

You can still do a replace, but use regex to exclude the hyphen error case. You can't use the \b word boundary metacharacter, since this will match "-" as a boundary. Instead use something like lblName.CssClass = Regex.Replace(lblName.CssClass, @"(?<![\w-])dialog(?![\w-])", "");which uses look behind and look ahead to match word boundaries excluding hyphens

KevD · Accepted Answer · 2014-06-30 08:10:30Z

15

Just a slightly more generic way of doing the same - should rule out potential errors where a css class might occur elsewhere in the CssClass property.

public void RemoveCssClass(WebControl controlInstance, String css)
{
    controlInstance.CssClass = String.Join(" ", controlInstance.CssClass.Split(' ').Where(x => x != css).ToArray());
}

edited Jun 30, 2014 at 8:10

answered May 1, 2012 at 10:10

KevD

7179 silver badges18 bronze badges

2 Comments

Tony Wall Over a year ago

I prefer this method because it is more like MVC style when you write it into an extension class (providing add and remove CSS class methods on all WebControls).

Kasim Husaini Over a year ago

Thanks |I used it and made extension class as below: public static class WebControlExtension { public static void RemoveCssClass(this WebControl controlInstance, String css) { controlInstance.CssClass = String.Join(" ", controlInstance.CssClass.Split(' ').Where(x => x != css).ToArray()); } public static void AddCssClass(this WebControl controlInstance, String css) { controlInstance.CssClass = String.Join($" {css} ", controlInstance.CssClass.Split(' ').ToArray()); } }

Somnath Kharat · Accepted Answer · 2014-02-07 13:06:43Z

1

Use this:

object.CssClass= object.CssClass.Replace("MyClass", "");

edited Feb 7, 2014 at 13:06

Somnath Kharat

3,5952 gold badges31 silver badges51 bronze badges

answered Dec 2, 2010 at 9:55

Ian Jasper

3,0787 gold badges39 silver badges60 bronze badges

Comments

Josh Lowe · Accepted Answer · 2014-06-30 15:11:10Z

1

This worked for me

lblName.CssClass = "regular";

answered Jun 30, 2014 at 15:11

Josh Lowe

4843 silver badges13 bronze badges

1 Comment

TylerH Apr 4 at 22:12

This changes the entire list of the CssClass property to just regular. It does not "remove" a particular CSS class, per se. It will not work for most people who need to simply remove a single, specific class from a CssClass list.

Kasim Husaini · Accepted Answer · 2019-12-25 08:44:16Z

Here is my code inspired by @KevD's code sample.

   public static void RemoveCssClass(this HtmlGenericControl controlInstance, string css)
    {
        var strCssClass = controlInstance.Attributes["class"];
        controlInstance.Attributes["class"] = string.Join(" ", strCssClass.Split(' ').Where(x => x != css).ToArray().Distinct());
    }

    public static void AddCssClass(this HtmlGenericControl controlInstance, string css)
    {
        var strCssClass = controlInstance.Attributes["class"];
        var cssList = strCssClass.Split(' ').ToArray().Distinct();
       cssList= cssList.Append(css);
        controlInstance.Attributes["class"] = string.Join(" ", cssList);
    }

    /// <summary>
    /// Add or remove specific css class
    /// </summary>
    /// <param name="controlInstance">Control to which css is to be added or remove</param>
    /// <param name="css">            Css class name to be added</param>
    /// <param name="bAddClass">      True to Add / false to remove</param>
    public static void AddOrRemoveCssClass(this HtmlGenericControl controlInstance, string css, bool bAddClass)
    {
        if (bAddClass)
        {
            controlInstance.AddCssClass(css);
        }
        else
        {
            controlInstance.RemoveCssClass(css);
        }
    }

    public static void RemoveCssClass(this WebControl controlInstance, string css)
    {
        controlInstance.CssClass = string.Join(" ", controlInstance.CssClass.Split(' ').Where(x => x != css).ToArray().Distinct());
    }

    public static void AddCssClass(this WebControl controlInstance, string css)
    {
        var cssList = controlInstance.CssClass.Split(' ').ToArray().Distinct();
      cssList=  cssList.Append(css);
        controlInstance.CssClass = string.Join(" ", cssList);
    }

    /// <summary>
    /// Add or remove specific css class
    /// </summary>
    /// <param name="controlInstance">Control to which css is to be added or remove</param>
    /// <param name="css">            Css class name to be added</param>
    /// <param name="bAddClass">      True to Add / false to remove</param>
    public static void AddOrRemoveCssClass(this WebControl controlInstance, string css, bool bAddClass)
    {
        if (bAddClass)
        {
            controlInstance.AddCssClass(css);
        }
        else
        {
            controlInstance.RemoveCssClass(css);
        }
    }

dizad87 · Accepted Answer · 2018-02-28 06:36:46Z

0

NOTE: whether you add or replace a css class in codeBehind, remember to include equivalent attributes in both classes i.e. both having background-color, font-family...etc. because otherwise you may be fooled to think that the class never switched even though it did but didn't update the equivalent attributes.

answered Feb 28, 2018 at 6:36

dizad87

4885 silver badges15 bronze badges

1 Comment

TylerH Apr 4 at 22:15

This is a comment at best, as it's just a warning about the practice. It doesn't actually address the question at all.

dizad87 · Accepted Answer · 2018-02-28 07:12:23Z

0

lblName.Attributes.Add("class","urclassname"); //add class to lblName

edited Feb 28, 2018 at 7:12

dizad87

4885 silver badges15 bronze badges

answered Feb 7, 2014 at 13:24

angfreak

1,0032 gold badges12 silver badges27 bronze badges

3 Comments

Eric Burdo Over a year ago

While this does add the class... it doesn't have a nice "remove" approach like jQuery does... so I'd prefer the CssClass approach like KevD or Jorge outlined.

GGO Over a year ago

Please explain what you did editing your answer, avoid only code answer

TylerH Apr 4 at 22:14

This does the opposite of what the question asks.

Abhishek Kanrar · Accepted Answer · 2025-04-21 13:02:00Z

0

To remove css Class from Code Behind

lblName.Attributes["class"] = lblName.Attributes["class"].Replace("required", "");;

edited Apr 21 at 13:02

answered Jul 31, 2018 at 8:48

Abhishek Kanrar

5065 silver badges7 bronze badges

1 Comment

TylerH Apr 4 at 22:14

This empties the Class attribute completely. It doesn't remove a specific CSS class from a list of multiple classes.

Collectives™ on Stack Overflow

remove css class in code behind

8 Answers 8

2 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related