TextBox - Styles

Customize RadInput by using custom CSS classes




Customize RadInput by using declarative styles







Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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

Help Us Improve

Was this example helpful?