The HTML output of a RadInput control with no label and no buttons is the following:

CopyRadInput HTML output - no label and buttons

<span class="RadInput RadInput_Default" id="RadControl1_wrapper">
    <input type="text" class="riTextBox riEnabled" id="RadControl1_text" />
    <input type="text" style="visibility: hidden" class="rdfd_" id="RadControl1" />
    <input type="hidden" id="RadControl1_ClientState" /></span>

• span.RadInput.RadInput_SkinName - this is the control wrapper, which holds the skin name. The <span> is an inline element, which does not force a new line on the page.

• input.riTextBox - this is the textbox that the user sees and types in. When blurred, it displays the formatted value or the empty message. It has a second CSS class, which depends on the state (enabled, hovered, focused, invalid, etc) and determines the border and text color.

• input.rdfd_ - this is a textbox, which the user does not see and it holds the actual control value. This is the element to which the client control instance is attached. The rdfd_ CSS class is for internal use. The textbox is not hidden with a display:none, but with visibility:hidden, so that tools such as callout extenders can calculate their position with regard to it. As a result of the visibility style, the hidden textbox still occupies 1-2px on the screen.

The HTML output of a RadInput control with a label or buttons is the following:

CopyRadInput HTML output - with label or buttons

<div class="RadInput RadInput_Default" id="RadControl3_wrapper">
    <table class="riTable">
        <tbody>
            <tr>
                <td>
                    <label class="riLabel">
                        Label</label>
                </td>
                <td class="riCell">
                    <input type="text" class="riTextBox riEnabled" id="RadControl3_text" />
                    <input type="text" style="visibility: hidden" class="rdfd_" id="RadControl3" />
                </td>
                <td class="riBtn">
                    <a href="#"><span>Button</span></a>
                </td>
                <td class="riSpin">
                    <a href="javascript:void(0)" class="riUp"><span>Spin Up</span></a><a href="javascript:void(0)"
                        class="riDown"><span>Spin Down</span></a>
                </td>
            </tr>
        </tbody>
    </table>
    <input type="hidden" id="RadControl3_ClientState" /></div>

• div.RadInput.RadInput_SkinName - this is the control wrapper, which holds the skin name. The <div> element is block-level and by default forces a new line on the page, but in this case it behaves like an inline-block element with the help of additional CSS styles. Since the display:inline-block style is not supported by all browsers, there are different styles applied for different browsers. The <div> element is used instead of a <span> because <span> elements cannot hold <table> elements inside.

• table.riTable - this is the second wrapper, which holds the label, textbox and button, each in separate table cell. The <table> element is required, because this is the only way to have several elements occupying a predefined amount of horizontal space without the need to use Javascript.

• label.riLabel - the textbox label, which provides information to the user. When clicked, the textbox is focused. The label is set with the Label string property.

• td.riCell - the table cell, which holds the textbox

• td.riBtn - the table cell, which holds the button - an <a> element. The button is displayed if ShowButton="true"

• td.riSpin - the table cell, which holds the spin buttons of RadNumericTextBox - a.riUp and a.riDown. These buttons are displayed if ShowSpinButtons="true".

The HTML output of a textbox styled by RadInputManager is the following:

CopyRadInputManager textbox HTML output

<input type="text" class="RadInputMgr RadInputMgr_Default RadInput_Enabled_Default"
    id="TextBox1" />

• input.RadInputMgr.RadInputMgr_SkinName - the textbox has three CSS classes - one is common for all RadInputManager textboxes, one is common for all RadInputManager textboxes with a particular skin, and the last one styles the textbox according to its state (enabled, hovered, focused, invalid, etc)

In all three examples above, the <input> element is replaced by a <textarea> element if TextMode="MultiLine".

• the RadInput table cells should have a zero padding, with the exception of the riCell table cell - it should have a right padding equal to the sum of the textbox' side borders and paddings. Otherwise the textbox will overlay the control's buttons or its right border will not be seen.

• the RadInput buttons should have a relative positioning and outline:none style in order to be clickable in Firefox. This is due to a proprietary CSS style (display:-moz-inline-stack) used to make the control behave like an inline-block element in this browser. Due to the relative positioning, Opera requires some z-index (e.g. 2). Internet Explorer 6 and 7 require the buttons to be static (not relative), otherwise a browser bug is triggered if the RadInput control is placed inside a scrollable container. In order to apply styles to IE6 and IE7 the following CSS hacks are used: "* html ..." for IE6 and "*+html ..." for IE7.

The Skin CSS file includes definitions for the classes that reflect the current state of the input controls. These classes are riEnabled, riDisabled, riEmpty, riFocused, riHover, riError, and riNegative.

Note
The various style properties will override any of the properties set by these classes.