RoundCorners for ComboBox

[Venkata]

Hi,

I am trying to set RoundCorners for my ComboBox. here is my code and CSS and image

 ASPX

<telerik:RadComboBox ID="RadcFilter" AllowCustomText="false" Font-Size="10pt"  SelectOnTab="true" HighlightTemplatedItems="true" MarkFirstMatch="true" ChangeTextOnKeyBoardNavigation="false" OnClientKeyPressing="radComboKeyPress"  OnClientFocus="OnClientFocus"  Filter="StartsWith" Skin="Simple"  runat="server" Width="300px" Height="150px"   EmptyMessage="Filter By ..." AutoPostBack="true" >
</telerik:RadComboBox>

 

CSS

<style type="text/css">

       html, body, form
       {
          height: 100%;
          margin: 0px;
          padding: 0px;
       }
       div.RadComboBox_Simple,
       div.RadComboBox_Simple .rcbInput
       {

           line-height: 17px;

       }
       div.RadComboBox_Simple table tr td.rcbInputCell
       {
           height: 27px;
           line-height: 27px;
       }
       div.RadComboBox_Simple td.rcbArrowCell a
       {
           height: 27px;
       }
       div.RadComboBox_Simple table tr td.rcbArrowCell
       {
           background-image: url('images/rcbSimpleSprite.png');
           background-repeat: no-repeat;
           background-position: 0 50%;
       }
       div.RadComboBox_Simple td.rcbArrowCell { background-position: 0 50%; }
       div.RadComboBox_Simple .rcbHovered .rcbArrowCell { background-position: -20px 50%; }
       div.RadComboBox_Simple .rcbFocused .rcbArrowCell { background-position: -40px 50%; }
       div.RadComboBox_Simple .rcbDisabled .rcbArrowCell { background-position: -60px 50%; }

       div.RadComboBox_Simple table td.rcbInputCell
       {
           border-radius: 7px 0 0 7px !important;
           border : 1px solid gray;
       }

       div.RadComboBox_Simple table td.rcbArrowCell
       {
           border-radius:0 7px 7px 0 !important;
           border : 1px solid gray;
       }
</style>

 

JavaScript

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

       <script type="text/jscript">
               function radComboKeyPress(comboBox, eventArgs) {

               var keyCode = eventArgs.get_domEvent().keyCode;
               if (keyCode == 9) {
                   try {
                       comboBox.get_highlightedItem().select();
                   }
                   catch (err) {
                       return;
                   }
               }
           }

           function OnClientFocus(sender, args) {
               sender.showDropDown();
           }
</script>

</telerik:RadCodeBlock>

[Dimitar]

Hi,

In order to customize the RadComboBox appearance easier only with CSS, I would recommend you to use its Lightweight Render Mode:

<telerik:RadComboBox ID="RadComboBox1" RenderMode="Lightweight" runat="server" Skin="Simple">

Thus, you could achieve rounded corners only with the following rule:

html .RadComboBox .rcbInner, html .RadComboBox .rcbActionButton {
    border-radius: 7px;
}

And the result is as follows:


Regards,
Dimitar
Telerik