obout inc - ASP.NET Combobox

Tutorial - Styles

Combobox has the FolderStyle property to easily change styles with only one line of code.

For example:
cbo1.FolderStyle = "/combobox/styles/default";
cbo1.FolderStyle = "/combobox/styles/my_style";

You can edit the existing styles or create new ones.

Below are exactly the same comboboxes with the FolderStyle property set to different styles.

FolderStyle =
"/combobox/styles/default"

FolderStyle =
"/combobox/styles/custom_style"

ASP.NET

<obout:Combobox id="cbo1" FolderStyle="/combobox/styles/myCustomStyle" runat="server">
...
</obout:Combobox>

Examples:

Border

Borders around the Combobox containers can be set using the
ob_cbContainer and ob_cbTopContainer classes from the style sheet.

Example:

    /* for the container of the combobox*/
  .ob_cbContainer {
        border: 3px solid #CCCCCC;

    /* for the top container of the combobox*/
  .ob_cbTopContainer {
        border: 3px solid #CCCCCC;

Background color

Background color for the options can be set using the ob_cbOption class
from the style sheet.

Example:

    /* for the options of the combobox*/
  .ob_cbOption {
        background-color: #EEEEEE;

Fonts

The fonts for the options can be changed using the ob_cbOption
and ob_cbOptionOver classes. The font used for the textbox,
can be modified using the ob_cbTextbox css class.

Example:

    /* for the textbox*/
  .ob_cbTextbox {
        font: 9pt Verdana;;        
        font-weight: bold;
        color: blue;        

   /* for the options*/
  .ob_cbOption {
        font: 9pt Verdana;        
        font-weight: bold;
        color: green;

Cursor

The cursor for the options mouse over effect can be changed using the ob_cbOptionOver class.

Example:

    /* for the options mouse over*/
  .ob_cbOptionOver {
        cursor: default;

Space between the textbox and the open/close button

Use a combobox with its textbox having a colored backgroud,
so the space between the textbox and the button to be visible.

You can modify the .ob_cbButtonContainer CSS class:

Example:

    /* for the button container*/
  .ob_cbButtonContainer {
        width: 20px;
        float: right;
  }

Please visit HOW-TO and Help page for any questions.

"The components Obout has are very cool ... keep up the good work"

Barry Cedergren

Questions? Send email to support@obout.com | Contact Us