Flatten Input Appearance

[Brian]

I have some inputs (mainly radnumerictextbox), on a portion of my page with a blue background. I would like the textbox area to be white with no borders.  I can do this with regular textboxes, but I have not been able to completely get rid of the border on the rad controls.

Any help would be appreciated!

[Shinu]

Hi,

To change the background and border please try the following CSS.

CSS:

.RadInput_Default .riTextBox, html body .RadInputMgr_Default
 {
     background:blue !important;
     border:0px !important;
 }

Thanks,
Shinu.

[Brian]

Hi Shinu,

Thank you.  That worked.

On a very related question, when I look at the markup that has been output to the browser, I do not see the name of the skin I applied to the control.

<telerik:RadNumericTextBox runat="server" ID="WidthTextBox" CssClass="riLeftTextBox" SkinID="SST_Touch" />
<telerik:RadNumericTextBox runat="server" ID="HeightTextBox" CssClass="FilterTextBoxRight" SkinID="SST_Touch" />

comes out as

<span id="filterTabContainer_ConfigurationTab_WidthTextBox_wrapper" class="riSingle RadInput RadInput_Default" style="width:160px;"><input id="filterTabContainer_ConfigurationTab_WidthTextBox" name="filterTabContainer$ConfigurationTab$WidthTextBox" class="riTextBox riEnabled riLeftTextBox" value="24.00" type="text" /><input id="filterTabContainer_ConfigurationTab_WidthTextBox_ClientState" name="filterTabContainer_ConfigurationTab_WidthTextBox_ClientState" type="hidden" /></span>
<span id="filterTabContainer_ConfigurationTab_HeightTextBox_wrapper" class="riSingle RadInput RadInput_Default" style="width:160px;"><input id="filterTabContainer_ConfigurationTab_HeightTextBox" name="filterTabContainer$ConfigurationTab$HeightTextBox" class="riTextBox riEnabled FilterTextBoxRight" value="24.00" type="text" /><input id="filterTabContainer_ConfigurationTab_HeightTextBox_ClientState" name="filterTabContainer_ConfigurationTab_HeightTextBox_ClientState" type="hidden" /></span>

Note that the skin id is nowhere to be found in the final markup.  Can anyone tell me why this is the case?

[Shinu]

Hi,

I suppose you need to add custom skin for the RadNumericTextBox, so you can set EnableEmbeddedSkins as false and set skin name as follows.
ASPX:

<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Skin="Green" EnableEmbeddedSkins="false">
</telerik:RadNumericTextBox>

Thanks,
Shinu.

[Brian]

Thank you.  That worked.  I was using SkinID at that point, but I guess it needed to be Skin.  That part is confusing to me, but I got it to work, so I am happy.  Thanks!