Apply css style to one control.

[Katya]

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

[Shinu]

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