Can't assign custom CSS to RadTextBox

[John Fair]

I have what seems like a simple problem, but I can't get it to work.  I am simply trying to assign a custom CSS class to a RadTextBox via the attribute: CssClass="checkoutRequiredInput".

<telerik:RadTextBox ID="txtName" runat="server" Width="175px" CssClass="checkoutRequiredInput" />

What's happening though, is the Telerik generated CSS file (WebResource.axd...) is being attached to the page AFTER my custom CSS file.  So the page is rendering my CSS, then the Telerik CSS which is overriding my style.  I'm not sure if this is the result of using a MasterPage, but I have tried moving my CSS file's declaration around (in the page, in the MasterPage, etc) without success.

WebResource.axd...2925083 (line 39)
html body .RadInput_Default .riTextBox, html body .RadInputMgr_Default  {
background:none repeat scroll 0 0 #FFFFFF;
border-color:#8E8E8E #B8B8B8 #B8B8B8 #8E8E8E;
border-style:solid;
border-width:1px;
color:#000000;
font:12px "segoe ui",arial,sans-serif;
padding:2px 1px 3px;
}
.checkoutRequiredInput {
background:none repeat scroll 0 0 Red;
margin:1px 0;
width:175px;
}

The above code is FireBug's output of the CSS, meaning the Top style takes precedence over the lower style.  As a result I cannot change the background color of the text box (I don't really want Red, but that would stand out if it worked).

Help?

EDIT:  Some additional details I assume you'll ask for.

1) The Default CSS file for a RadTextBox is loading (and I'm not sure why?  Is it automatic?)
<link class="Telerik_stylesheet" rel="stylesheet" type="text/css" href="/WebResource.axd?d=6ddCgTwcPGvcxML-k0DaXaNEwHkJQpsgRAzQRolF4UiV223Ken5HxvNrMIg0hxBY6YouB_BWaesPTT9LEBov1w2&amp;t=634009647102925083">
This is how the CSS file starts out--> /*Telerik RadInput Default Skin*/

2) When I investigate the source for this Demo: http://demos.telerik.com/aspnet-ajax/input/examples/appearance/styles/defaultcs.aspx
That CSS file (from #1 above) isn't being loaded.  This allows your custom CSS to be evaluated successfully. 

What causes the default CSS file to be loaded?  I have stripped the Skin Attribute from all of my RadTextBox controls for this page (however some still exist elsewhere in this site, which might cause the default to load due to the MasterPage?) and yet the default is still loaded.

[Dimo]

Hello John,

The solution to your problem lies in understanding the concept of CSS specificity:

http://blogs.telerik.com/dimodimov/posts/08-06-17/how_to_override_styles_in_a_radcontrol_for_asp_net_ajax_embedded_skin.aspx

The specificity of the RadInput styles are 22. The specificity of your custom CSS rule is 10. Please increase it, e.g. to 23:

html body form .RadInput .checkoutRequiredInput
{
     ........
}


Regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[John Fair]

Thanks Dimo, I knew it was something simple, but it was escaping me.  :)  Much appreciated.

[Bosko Maksimovic]

My Css is being overrode and i can't get more specificity because the .axd one is so high!
(why does it have html and body?! its making it to high a specificity)

is there a way of getting the .axd file to insert custom css after all the other stuff?

HTML BODY input.HasToolTip
{
    background: #fff !important;
    background-image: url('images/16-comment-square-question.png') !important;
    background-repeat: no-repeat !important;
    background-position: right !important;
}

[Dimo]

Hello Bosko,

The specificity of RadInput styles is 22, so that they are not accidentally overridden by web application styles. In your case, please use

HTML BODY input.HasToolTip ,
HTML BODY .RadInput  input.HasToolTip  
{  
    background: #fff !important;  
    background-image: url('images/16-comment-square-question.png') !important;  
    background-repeat: no-repeat !important;  
    background-position: right !important;  
}

Kind regards,
Dimo
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.