RoundCorners for ComboBox

2 posts, 0 answers
  1. Venkata
    Venkata avatar
    126 posts
    Member since:
    Nov 2009

    Posted 27 May 2015 Link to this post

    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>

  2. Dimitar
    Admin
    Dimitar avatar
    281 posts

    Posted 28 May 2015 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top