Apply css style to one control.

2 posts, 0 answers
  1. Katya
    Katya avatar
    21 posts
    Member since:
    May 2013

    Posted 29 Jul 2013 Link to this post

    Hi

    I have a doubt. When we are overriding a default style using CSS ! Important, its applied to all the respective controls. How can we avoid this such as I want to apply a hovered style for only one textbox in my page?

    Any input to tackle this will be helpful
    Katya
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 29 Jul 2013 Link to this post

    Hi Katya,

    When you override the CSS styles of a RadInput control say RadTextBox, the change gets reflected in all the RadTextBox controls in the same page. One option to overcome this default behavior is to use the RadTextbox's ID at the time of overriding the style. Pease have a look into the following code I tried which works fine at my end.

    ASPX:
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
    </telerik:RadTextBox>
    <br />
    <telerik:RadTextBox ID="RadTextBox2" runat="server">
    </telerik:RadTextBox>
    <br />
    <telerik:RadTextBox ID="RadTextBox3" runat="server">
    </telerik:RadTextBox>

    CSS:
    <style type="text/css">
        #RadTextBox1.riTextBox[type="text"]
        {
            color: green !important;
        }
    </style>

    In the above CSS, I am setting the RadTextBox1's text color to green with the help of its ID and this wont get reflected in the other RadTextBoxes.

    Another suggestion is you can use the OnLoad client event to set a custom style for that particular control. Please check the following sample code.

    ASPX:
    <telerik:RadTextBox ID="RadTextBox1" runat="server">
        <ClientEvents OnLoad="OnLoad" />
    </telerik:RadTextBox>

    JavaScript:
    <script type="text/javascript">
        function OnLoad(sender, args) {
            sender.get_styles().EnabledStyle[0] += "border: 1px solid red;";
            sender.updateCssClass();
        }
    </script>

    Thanks,
    Shinu
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top