Stop Telerik from styling every input on the page

6 posts, 0 answers
  1. Andrew
    Andrew avatar
    5 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 Link to this post


    I have an issue where Telerik is styling my submit input fields.

    For example this one:
    <input type="submit" name="search" value="Book Now">

    Get's automatically styled with the Telerik RadButton style using the Default Skin for the project (with is MetroTouch).

    I have attached a screenshot of what happens.



  2. Andrew
    Andrew avatar
    5 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 Link to this post

    Futher investigation I see that it is attaching itself on the HTML tag:

    <html lang="en-US" class="csstransforms csstransforms3d csstransitions RadForm RadForm_MetroTouch rfdButton rfdScrollBars rfdRadio rfdCheckbox">

    Temporarily disabling Javascript in the browser and reloading the page returns:
    <html lang="en-US">

    So something in Javascript land is causing this to happen.
  3. Andrew
    Andrew avatar
    5 posts
    Member since:
    Feb 2014

    Posted 02 Feb 2014 in reply to Andrew Link to this post

    There are a large number of !important CSS styles overriding the button.

    It appears the easiest way to change the button color is by using the following CSS selector (for others that might have this issue - replace MetroTrouch with the name of the Skin found in the CSS class on the HTML tag):

    .RadForm_MetroTouch.rfdButton .rfdSkinnedButton input.rfdDecorated[type="button"], .RadForm_MetroTouch.rfdButton .rfdSkinnedButton input.rfdDecorated[type="reset"], .RadForm_MetroTouch.rfdButton .rfdSkinnedButton input.rfdDecorated[type="submit"], .RadForm_MetroTouch.rfdButton .rfdSkinnedButton button, .RadForm_MetroTouch.rfdButton a.rfdInputDisabled.rfdSkinnedButton:hover * {
    background-color: Green;



  4. Bozhidar
    Bozhidar avatar
    693 posts

    Posted 04 Feb 2014 Link to this post


    Thanks for contacting Telerik support. As I could see from your description, it is expected, when using RadFormDecorator on the page to decorate all you form elements, including submit buttons. If you like any button to be skipped form decoration, it is not necessary to override any styles, but to simply add class property for HTML element and CssClass property for ASPX element. In your case, it should be similar - note that I just applied some styles to the button to mimic the button from the attached image:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <head runat="server">
        <style type="text/css">
        .bookNow {
            background-color: Green;
            color: White;
            font-weight: bold;
            width: 150px;
            border: 0;
            height: 30px;
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        <telerik:RadFormDecorator runat="server" DecoratedControls="All" Skin="MetroTouch" />
        <input type="submit" name="search" value="Book Now" class="bookNow" />

    As you could see, I don't override any FormDecorator styles, but the button is only styled by the CSS included in the head section of the document. If you remove the styles form there, you'll find that the button will appear in its base browser style.

    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  5. vinay
    vinay avatar
    1 posts
    Member since:
    Nov 2014

    Posted 16 Dec 2014 in reply to Bozhidar Link to this post

    HI , 
    Even i got the same issue. I have applied CSSclass to the textboxes available in User control. But at runtime the css class is overrided and added with rfdDecorated class to the existing class. can anyone help me on this . 
  6. Danail Vasilev
    Danail Vasilev avatar
    1502 posts

    Posted 18 Dec 2014 Link to this post


    You can use the radPreventDecorate class. For example:

    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
    <asp:TextBox ID="Textbox1" runat="server" CssClass="radPreventDecorate" />

    Danail Vasilev

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top