Can't assign custom CSS to RadTextBox

5 posts, 1 answers
  1. John Fair
    John Fair avatar
    3 posts
    Member since:
    Aug 2009

    Posted 18 Feb 2010 Link to this post

    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.


  2. Answer
    Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 18 Feb 2010 Link to this post

    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.
  3. John Fair
    John Fair avatar
    3 posts
    Member since:
    Aug 2009

    Posted 18 Feb 2010 Link to this post

    Thanks Dimo, I knew it was something simple, but it was escaping me.  :)  Much appreciated.
  4. Bosko Maksimovic
    Bosko Maksimovic avatar
    13 posts
    Member since:
    Oct 2012

    Posted 23 Mar 2010 Link to this post

    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;  
  5. Dimo
    Admin
    Dimo avatar
    8482 posts

    Posted 23 Mar 2010 Link to this post

    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.
Back to Top