4

I am attempting to do something simple.

I have a button.

<asp:Button ID="btnMyButton" runat="server" CssClass="MyButton" CausesValidation="False" Text="ClickMe" />

Its style is stored in a stylesheet that I KNOW is being used because other elements in the page use styles from this stylesheet.

This is how I define the style:

.MyButton {
    font-size: 80pt;
    color: red;
}

I have also tried some other ways to specifically point to this class (including specifically referring to it from a containing element) but to no avail:

input[type="submit"].MyButton { table.MyTable > tbody > tr > td > input.MyButton {

I can see in Google Chrome's Developer TOols that it is not even overriding the styles I'm setting, they are simply not there.

When I look at the page source, I see that the input control ASP.NET generates does not even USE my class (it uses something called submitBtn, which I myself have not defined anywhere). If I change this class to my one in using Google Chrome's Developer Tools, my styles apply as I would expect so I know they are usable. I just do not know why they are not being used to begin with.

I CAN style all buttons globally with input[type="submit"] {, but I am trying to style a specific one and would rather not use inline style definitions.

Please advise.

EDIT:

I have found that if I call my css class in my css file submitBtn, it WILL apply the styles I set. However as all of the ASP.Net buttons appear to want to use this submitBtn css class, in order to set a distinct style for each one I'll have to wrap them in spans or something and specifically set button styles this way.

I still want to know why it's not letting me set the name of the style class used for the ASP.Net buttons though.

I have updated the Question title for greater clarity.

Interminable
  • 1,338
  • 3
  • 21
  • 52
  • Did you search for "submitBtn" in your whole project? If you're seeing that in the button markup in your browser, then something is adding it and overriding the one you put in your page, either on the server or the client. – Michael Jul 18 '13 at 19:53
  • If there were, then would I not see this style class under the Styles part of the Elements tab when I use Google Chrome's Inspect Element? When I view the element, I cannot see it using the submitBtn class under the styles, there is only 'user agent stylesheet', which if I understand it right is what the browser defaults to in order to render elements. – Interminable Jul 19 '13 at 07:51
  • Something has to be adding the "submitBtn" to your class attribute though. If you create a blank web application, drop a new asp:button, set its CssClass to "MyClass", then run, you won't see it get replaced with "submitBtn". I guess my point was that instead of hacking around this other class by wrapping a span, maybe figure out what is putting the submitBtn class on in the first place. If you can't, then yes, you could wrap it, in order to target a different way in your CSS (or even target by its ID). – Michael Jul 19 '13 at 17:53
  • That's the thing, I have no idea what could be overriding it. It's a User Control being used on a Sitefinity page. In addition, this submitBtn style clearly doesn't exist because Google Chrome's web dev view shows no styles being set from a class of that name. I only see that class name in the page source. Not in the styles being applied. – Interminable Jul 21 '13 at 10:08
  • If you end up finding the submitBtn class is getting added by Sitefinity, I would submit a Telerik support ticket or forum post. I have not used Sitefinity, but have used other Telerik products, and their support is top-notch. – Michael Jul 23 '13 at 17:27

4 Answers4

4

You can set inline style to the asp.net controls.

<asp:Button ID="btnMyButton" runat="server" CausesValidation="false" Text="ClickMe"
            Style="font-size: 80pt; color: Red;" />

or 

.MyButton
{
    font-size:80pt;
    color:Red;
}

<asp:Button ID="btnMyButton" runat="server" CausesValidation="false" Text="ClickMe"
             CssClass="MyButton"/>

work fine for me.

Cheers

shammelburg
  • 6,974
  • 7
  • 26
  • 34
  • 1
    I want to avoid inline style definitions, I'd rather they are all defined in CSS files. As for your second example, that is pretty much what I have, but it does not work for me and I do not know why. – Interminable Jul 18 '13 at 16:11
  • add the CSS to the head of your HTML doc between the tags to see whether that works. – shammelburg Jul 18 '13 at 16:15
  • Maybe this button just needs inline style set to it. have you tried it? does it work? something is obviously not linking up correctly. – shammelburg Jul 18 '13 at 16:25
  • It does apply the in-line styles I set. In addition, even though the MSDN recommends against it, I tested it by trying to apply the class and the inline CSS style. Only the inline one was applied when my class was using a custom name. When using the class name `submitBtn` (see my updated Question), the inline style overrides the `submitBtn` class I define, but other styles that it does not override still get applied. – Interminable Jul 19 '13 at 08:06
3

I know this is the old question, but in case if someone will stuck on the same problem, you should also check your .skin file. In my case there was the following declaration:

<asp:LinkButton CssClass="linkbtn"></asp:LinkButton>

and this was forcing all LinkButton controls throughout the application to have "linkbtn" class with no pissibility to override it.

Denys Avilov
  • 427
  • 1
  • 4
  • 8
1

had the same problem. In my case, I was working with SharePoint, which CSS overrode my button style. try:

.MyButton
{
    font-size:80pt !important;
    color:Red !important;
}

!important makes a style un-overridable...

mrEE
  • 11
  • 1
  • ah that saved me. Jquery was applying styles to my ASP:Buttons and even setting the CssClass did not help override the styles.. using the !important flag fixed the issue thanks! – RyanG Aug 18 '14 at 20:17
1

Use <asp:LinkButton> instead

So your button would be

<asp:LinkButton ID="btnMyButton" runat="server" CssClass="MyButton" CausesValidation="False" Text="ClickMe" />
mina
  • 11
  • 2