To make customizing the appearance of RadComboBox as easy as possible, the control uses skins. A skin is a set of images and a CSS stylesheet
that can be applied to the combobox elements (items, images, etc.) and defines their look and feel. To apply a skin to the combobox, set its Skin property, either
using the properties pane or the RadComboBox Smart Tag.
The control comes with a number of built-in skins:
Customizing Skins
You can tweak the existing skins, or create your own. Each skin has two main elements: images and a stylesheet. When creating your own, it is a good idea to start with the
stylesheet for an existing skin and alter that. See the Tutorial: Creating a Custom Skin topic for a step-by-step walk
through. To use your own skin
- Add the new CSS file to your project.
- Drag and drop the CSS file from the Project Explorer onto your Web page.
- Set the EnableEmbeddedSkins property of the RadComboBox to False.
The stylesheet for a RadComboBox skin has the name ComboBox.[SkinName].css and can be found in the
...Skins/[SkinName] directory. The images are found in the ...Skins/[SkinName]/ComboBox directory. For example, the stylesheet for
the "Black" skin is called ComboBox.Black.css and is located in the ...Skins/Black directory. The images are found in the ...Skins/Black/ComboBox
directory. The images are referenced by name from within the stylesheet.
For more information on the CSS File structure, see the Understanding the Skin CSS File topic.
The stylesheet for the "Black" skin is as follows:
| [CSS] ComboBox.Black.css |
 Copy Code |
|
/* RadComboBox Black skin */
/*global*/
.RadComboBox_Black *
{
margin:0;
padding:0;
}
.RadComboBox_Black,
.RadComboBox_Black input,
.RadComboBoxDropDown_Black
{
font:12px "segoe ui",arial,verdana,sans-serif;
color:#999;
}
/* combobox */
.RadComboBox_Black
{
vertical-align:bottom;
}
.RadComboBox_Black table
{
border:0;
border-collapse:collapse;
}
.RadComboBox_Black td
{
border: 0;
}
.RadComboBox_Black .rcbInputCell
{
width:100%;
height:23px;
line-height:22px;
border: 0;
vertical-align:top;
background: transparent url('ComboBox/rcbBg.gif') no-repeat;
}
.RadComboBox_Black .rcbInputCellLeft { background-position: 0 0; padding-left: 5px; }
.RadComboBox_Black .rcbInputCellRight { background-position: 100% 0; padding-right: 5px; }
.RadComboBox_Black .rcbDisabled .rcbInputCellLeft { background-position: 0 -24px; }
.RadComboBox_Black .rcbDisabled .rcbInputCellRight { background-position: 100% -24px; }
.RadComboBox_Black .rcbHovered .rcbInputCellLeft { background-position: 0 -48px; }
.RadComboBox_Black .rcbHovered .rcbInputCellRight { background-position: 100% -48px; }
.RadComboBox_Black .rcbFocused .rcbInputCellLeft { background-position: 0 -72px; }
.RadComboBox_Black .rcbFocused .rcbInputCellRight { background-position: 100% -72px; }
.RadComboBox_Black .rcbInputCell input
{
width:100%;
background:transparent;
border:0;
vertical-align:top;
padding:4px 0 3px 2px;
}
.RadComboBox_Black .rcbInputCell
{
padding: 0 0 0 2px;
}
.RadComboBox_Black_rtl .rcbInputCell input
{
padding:4px 2px 3px 0;
}
.RadComboBox_Black_rtl .rcbInputCell
{
padding: 0 2px 0 0;
}
.RadComboBox_Black .rcbArrowCell
{
border: 0;
padding:0;
width:24px;
background: transparent url('ComboBox/rcbArrowCell.gif') no-repeat;
}
.RadComboBox_Black .rcbArrowCellLeft { background-position: -24px 0; }
.RadComboBox_Black .rcbArrowCellRight { background-position: 0 0; }
.RadComboBox_Black .rcbDisabled .rcbArrowCellLeft { background-position: -24px -24px; }
.RadComboBox_Black .rcbDisabled .rcbArrowCellRight { background-position: 0 -24px; }
.RadComboBox_Black .rcbHovered .rcbArrowCellLeft { background-position: -24px -48px; }
.RadComboBox_Black .rcbHovered .rcbArrowCellRight { background-position: 0 -48px; }
.RadComboBox_Black .rcbFocused .rcbArrowCellLeft { background-position: -24px -72px; }
.RadComboBox_Black .rcbFocused .rcbArrowCellRight { background-position: 0 -72px; }
.RadComboBox_Black .rcbArrowCell a
{
position:relative;
outline:none;
line-height:22px;
overflow:hidden;
display:block;
width:24px;
height:24px;
text-decoration:none;
text-indent: -9999px;
font-size: 0;
}
.RadComboBox_Black .rcbHovered,
.RadComboBox_Black .rcbHovered input,
.RadComboBox_Black .rcbFocused,
.RadComboBox_Black .rcbFocused input
{
color:#cbcbcb;
}
.RadComboBox_Black .rcbDisabled .rcbArrowCell a
{
cursor:no-drop;
}
.RadComboBox_Black .rcbDisabled,
.RadComboBox_Black .rcbDisabled input
{
color: #373737;
}
/* dropdown */
.rcbSlide
{
position:absolute;
overflow:hidden;
display:none;
_height:1px;
float:left;
}
.RadComboBoxDropDown_Black
{
position:absolute;
background:#fff;
border: 1px solid #323232;
cursor:default;
font-size:11px;
text-align: left;
}
.RadComboBoxDropDown_Black .rcbScroll
{
overflow:auto;
}
.RadComboBoxDropDown_Black .rcbList
{
list-style:none;
margin:0;
padding:0;
background: #292929;
}
.RadComboBoxDropDown_Black .rcbNoWrap .rcbList
{
float:left;
}
.RadComboBoxDropDown_Black .rcbHeader
{
background:#202020;
border-bottom: 1px solid #141414;
color:#999;
padding:3px 0;
}
.RadComboBoxDropDown_Black .rcbNoWrap .rcbItem,
.RadComboBoxDropDown_Black .rcbNoWrap .rcbHovered,
.RadComboBoxDropDown_Black .rcbNoWrap .rcbDisabled,
.RadComboBoxDropDown_Black .rcbNoWrap .rcbLoading
{
white-space:nowrap;
}
.RadComboBoxDropDown_Black .rcbItem,
.RadComboBoxDropDown_Black .rcbHovered,
.RadComboBoxDropDown_Black .rcbDisabled,
.RadComboBoxDropDown_Black .rcbLoading
{
padding:4px 20px 4px 4px;
zoom:1;
}
*+html .RadComboBoxDropDown_Black .rcbItem,
*+html .RadComboBoxDropDown_Black .rcbHovered,
*+html .RadComboBoxDropDown_Black .rcbDisabled,
*+html .RadComboBoxDropDown_Black .rcbLoading
{
zoom: normal;
}
.RadComboBoxDropDown_Black_rtl .rcbItem,
.RadComboBoxDropDown_Black_rtl .rcbHovered,
.RadComboBoxDropDown_Black_rtl .rcbDisabled,
.RadComboBoxDropDown_Black_rtl .rcbLoading
{
padding:4px 4px 4px 20px;
}
.RadComboBoxDropDown_Black .rcbItem
{
border: solid #292929;
border-width: 1px 0;
color: #717171;
}
.RadComboBoxDropDown_Black .rcbHovered
{
background:#343434 url('ComboBox/rcbDropDownHover.gif') repeat-x top left;
border-top: 1px solid #242424;
border-bottom: 1px solid #494949;
color:#999;
}
.RadComboBoxDropDown_Black .rcbDisabled
{
color:#555;
cursor:no-drop;
}
.RadComboBoxDropDown_Black .rcbLoading
{
background:#292929;
color: #505050;
text-align:center;
}
.RadComboBoxDropDown_Black .rcbMoreResults
{
clear:both;
background:#292929;
padding:4px;
text-align:center;
border-top: 1px solid #141414;
}
.RadComboBoxDropDown_Black .rcbMoreResults a
{
display:block;
width:7px;
height:6px;
background:url('ComboBox/rcbMoreResults.gif') no-repeat transparent;
margin:0 auto;
text-indent:-3333px;
overflow:hidden;
text-decoration:none;
cursor:pointer;
}
.RadComboBoxDropDown_Black .rcbMoreResults span
{
display:block;
text-align:center;
}
.RadComboBoxDropDown_Black .rcbScroll
{
scrollbar-face-color: #323232;
scrollbar-highlight-color: #323232;
scrollbar-shadow-color: #323232;
scrollbar-3dlight-color: #434343;
scrollbar-arrow-color: #434343;
scrollbar-track-color: #202020;
scrollbar-darkshadow-color: #323232;
}
/*hacks*/
/*Opera start*/
@media screen and (min-width:550px)
{
.RadComboBoxDropDown_Black_rtl .rcbItem,
.RadComboBoxDropDown_Black_rtl .rcbHovered,
.RadComboBoxDropDown_Black_rtl .rcbDisabled,
.RadComboBoxDropDown_Black_rtl .rcbLoading
{
padding:4px 4px 4px 20px;
}
} /*Opera end*/
|
See Also