New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Styles

Customize RadInput by using custom CSS classes




Customize RadInput by using declarative styles







If you applied some of the predefined skins for the RadInput controls (for example the Default skin), you can easily modify its look and feel by the following style properties:

  • EnabledStyle - use this property to provide a custom style for the enabled RadInput control.
    Important: The definitions from the EnabledStyle property in the RadInput control are inherited from one style property to another in a hierarchy. Therefore, the appearance settings specified by the EnableStyle property will be propagated for the rest of the styles. For example, if you specify a red font for the EnabledStyle property, all other style properties in RadInput will also have a red font
  • DisabledStyle - use this property to provide a custom style for the disabled RadInput control
  • EmptyMessageStyle - use this property to provide a custom style for the empty message state of RadInput control
  • FocusedStyle - use this property to provide a custom style for the focused RadInput control
  • HoveredStyle - use this property to provide a custom style for the hovered RadInput control
  • InvalidStyle - use this property to provide a custom style for the invalid state RadInput control
Apart from using a CSS skin, the RadInput look can be customized by using declarative styles or custom CSS classes. In general, the recommended way is to use custom CSS classes or a custom CSS skin.

The first pair of RadInput controls also demonstrate how to align the left edges of the textboxes by applying width and a display:block CSS style to the control labels.

Related Resources

  • DefaultCS.aspx
  • styles.css
<%@ Page Language="c#"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-containers">
        <div class="demo-container">
            <div style="float: left; padding: 0 20px">
                <h3>Customize RadInput by using custom CSS classes</h3>
                <br />
                <telerik:RadNumericTextBox RenderMode="Lightweight" ID="RadNumericTextBox2" runat="server" Width="355px" Value="99.99" Skin="MetroTouch"
                    EmptyMessage="type a number..." Label="RadNumericTextBox" CssClass="MyEnabledTextBox" LabelCssClass="MyLabel">
                    <EmptyMessageStyle CssClass="MyEmptyTextBox"></EmptyMessageStyle>
                    <EnabledStyle CssClass="MyEnabledTextBox"></EnabledStyle>
                    <FocusedStyle CssClass="MyFocusedTextBox"></FocusedStyle>
                    <HoveredStyle CssClass="MyHoveredTextBox"></HoveredStyle>
                    <InvalidStyle CssClass="MyInvalidTextBox"></InvalidStyle>
                    <NegativeStyle CssClass="MyNegativeTextBox"></NegativeStyle>
                </telerik:RadNumericTextBox>
                <br />
                <br />
                <telerik:RadDateInput RenderMode="Lightweight" ID="RadDateInput2" runat="server" Width="355px" DisplayDateFormat="g" Skin="MetroTouch" SelectedDate="10/10/2005 10:11:12" EmptyMessage="enter a date..." Label="RadDateInput" CssClass="MyEnabledTextBox" LabelCssClass="MyLabel">
                    <EmptyMessageStyle CssClass="MyEmptyTextBox"></EmptyMessageStyle>
                    <EnabledStyle CssClass="MyEnabledTextBox"></EnabledStyle>
                    <FocusedStyle CssClass="MyFocusedTextBox"></FocusedStyle>
                    <HoveredStyle CssClass="MyHoveredTextBox"></HoveredStyle>
                    <InvalidStyle CssClass="MyInvalidTextBox"></InvalidStyle>
                </telerik:RadDateInput>
            </div>
            <div style="float: right; padding: 0 20px">
                <h3>Customize RadInput by using declarative styles</h3>
                <br />
                <telerik:RadNumericTextBox RenderMode="Lightweight" ID="RadNumericTextBox1" runat="server" Width="355px" Value="99.99" EmptyMessage="type a number..." Label="RadNumericTextBox" BorderWidth="2px" Font-Size="14px" Font-Names="Arial" LabelWidth="150px">
                    <EmptyMessageStyle ForeColor="Gray"></EmptyMessageStyle>
                    <EnabledStyle BorderColor="#a9a9c9" BackColor="White"></EnabledStyle>
                    <FocusedStyle BorderColor="DeepSkyBlue" BackColor="AliceBlue"></FocusedStyle>
                    <HoveredStyle BorderColor="Turquoise" BackColor="LightCyan"></HoveredStyle>
                    <InvalidStyle BorderColor="Crimson" BackColor="LightYellow"></InvalidStyle>
                    <NegativeStyle ForeColor="Red"></NegativeStyle>
                </telerik:RadNumericTextBox>
                <br />
                <br />
                <telerik:RadDateInput RenderMode="Lightweight" ID="RadDateInput1" runat="server" Width="355px" DisplayDateFormat="g" SelectedDate="10/10/2005 10:11:12" Label="RadDateInput" EmptyMessage="enter a date..." BorderWidth="2px" Font-Size="14px" Font-Names="Arial" LabelWidth="150px">
                    <EmptyMessageStyle ForeColor="Gray"></EmptyMessageStyle>
                    <EnabledStyle BorderColor="#a9a9c9" BackColor="White"></EnabledStyle>
                    <FocusedStyle BorderColor="DeepSkyBlue" BackColor="AliceBlue"></FocusedStyle>
                    <HoveredStyle BorderColor="Turquoise" BackColor="LightCyan"></HoveredStyle>
                    <InvalidStyle BorderColor="Crimson" BackColor="LightYellow"></InvalidStyle>
                </telerik:RadDateInput>
            </div>
            <br class="qsf-clear-float" />
            <br />
            <br />
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance