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

Custom Styles

Syringa (Lilac)






You can easily modify the look and feel of the RadInput skins using CSS. When the single input rendering mode is enabled, this customization is even more effortless.
This demo illustrates how you can predefine client-side the built-in styles of a skin using CSS selectors.

Please note that there are two elements - <input /> and <span /> , which hold formatted and empty messages. Their padding and border-width styles should be equal on the top and the right.

Play with the RadInput above to see the different styles.

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-container no-bg">
        <div class="mainContainer">
            <h2 style="color: #be73ae; text-align: center">
                <i>Syringa (Lilac)</i></h2>
            <div style="float: left; width: 350px; padding: 0 20px;">
                <br />
                <telerik:RadNumericTextBox RenderMode="Lightweight" ID="RadNumericTextBox1" EnableSingleInputRendering="true" Skin="Default" WrapperCssClass="MyWrapper" LabelCssClass="MyLabel" runat="server" Type="Currency" Width="320px" Value="21" EmptyMessage="type a number..." Label="Price (per tree):">
                </telerik:RadNumericTextBox>
                <br />
                <br />
                <br />
                <telerik:RadDateInput RenderMode="Lightweight" ID="RadDateInput1" runat="server" EnableSingleInputRendering="true" Skin="Default" WrapperCssClass="MyWrapper" LabelCssClass="MyLabel" Width="320px" DisplayDateFormat="g" DateFormat="g" SelectedDate="11/11/2011 10:11:12" EmptyMessage="enter a date..." Label="Last updated: ">
                </telerik:RadDateInput>
            </div>
            <div style="float: right; width: 350px; padding: 0 20px">
                <telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" EnableSingleInputRendering="true" Skin="Default" WrapperCssClass="MyWrapper MyWrapperMultiline" LabelCssClass="MyLabelMultiline" runat="server" Label="Additional information:" Width="320px" TextMode="MultiLine" Rows="2" Text="Lilacs are often considered to symbolize love (see language of flowers)." EmptyMessage="enter some notes...">
                </telerik:RadTextBox>
                <br />
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance