Cascading Style Sheet Syntax

The following sections show sample CSS syntax. The purpose of this topic is not to teach CSS syntax, rules, properties or any other related concepts, but to show some simple element examples that can you can apply to your style sheets. For further information about any of the syntax, visit http://www.w3schools.com/cssref.

Use the following links to jump to the element details:

Bitmap

Back to list

DOM structure 

<div id="img_cnt_851" class="ui-control" style="...">
    <div id="img_851" class="ui-bitmap" style="">
        <img src="/media/image?img=...">
    </div>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-bitmap The image element

CSS selector samples 

.ui-bitmap img:hover {
	/* changing mouse cursor shape on mouse over */
	cursor: zoom-in;
}

Check-Box

Back to list

DOM structure 

<div id="check_cnt_757" class="ui-control" style="..." tabindex="0">
    <div id="check_757" class="ui-control-checkbox" style="...">
        <div class="ui-control-check"><div></div></div>
        <legend style="...">...</legend>
    </div>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-checkbox The radio-button element
ui-control-check The radio-button bullseye
ui-control-left-text Applied to the main element when left-text style is set
ui-control-checkbox-win32native Applied to the check-box when WIN32_NATIVECTLS is set to true
ui-control-checkbox-flat Applied to the radio-button element when flat style is set
checked Applied to the div.ui-control-check when the check-box is checked

CSS selector samples 

.ui-control-checkbox legend {
	/* adds a simple shadow to the check-box text */
	text-shadow: 2px 2px #ccc;
}

.ui-control-checkbox .checked {
	/* change the check mark border when is selected */
	border-color: #ff0000 !important;
	border-style: solid !important;
}

Combo-Box

Back to list

DOM structure 

<div id="combo_cnt_754" class="ui-control" style="...">
    <div id="combo_754" class="dom-combobox" style="...">
        <div class="dom-combobox-container" style="...">
            <input type="text" class="dom-selector" readonly="readonly">
            <a class="dom-combobox-button">
                <span class="ui-icon"></span>
            </a>
        </div>
    </div>
</div>
...
<div class="dom-combobox dom-elems-container" style="...">...</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-combobox-win32native Applied to the element when WIN32_NATIVECTLS is set to true
ui-combobox-flat Applied to the main element when the flat style is set
dom-combobox The combo-box element (main container)
dom-combobox-container A div wrapping the input field and the combo-box button
dom-selector The combo-box input field
dom-combobox-button The combo-box button
dom-elems-container The combo-box list (created on open)

CSS selector samples 

.dom-combobox-container input {
    /* changing default foreground color */
    color: red;
}

.dom-combobox-button span {
    /* changing button icon */
    background-image: url(...);
}

.dom-elems-container {
    /* changing the border and the background color of the combobox items list */
    background-color: #fafafa;
    border: 1px solid #ccc;
}

Date-Entry

Back to list

DOM structure 

<div id="dateentry_cnt_752" class="ui-control" style="...">
    <input id="dateentry_752_tvs" type="text" class="is-calendarsPicker">
    <input id="dateentry_752_noneCheck" type="checkbox" checked="">
    <select id="dateentry_752_cal" class="ui-control-staticselect"></select>
</div>

CSS class list

ui-control Parent div wrapping the component
is-calendarsPicker The date-entry input element
select Used as date-entry button

CSS selector samples 

.ui-control .is-calendarsPicker {
    color: #333;
    border: 0;
    border-bottom: 5px solid #444;
    padding-bottom: 3px;
    box-sizing: content-box !important;
}

Entry-Field

Back to list

DOM structure 

<div id="txt_cnt_843" class="ui-control" style="...">
    <input id="txt_843" class="ui-control-textfield" type="..." >
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-textfield The input element

CSS selector samples 

.ui-control-textfield[type=password] {
    /* cool password field */
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAPCAQAAACCCB01AAAAV0lEQVQIW2NgYDg74ex/MJzAAOU0nHUA0xMYIOJA7gIQC8KFQwzuASTuAoazAmc/QDkXzgqAzBaAKoQBoDgKF2IJlCNwtgCVi1/xAyD3AUI2AGh3AYgFAImLeCPFitxPAAAAAElFTkSuQmCC) 12px 50% no-repeat, linear-gradient(to bottom, #f7f7f8 0%,#ffffff 100%);
    border-radius: 3px;
    border: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset, 0 -1px 0 rgba(0,0,0,0.05) inset;
    transition: all 0.2s linear;
    color: #222222;
}
.ui-control-textfield[type=password]:focus {
    /* on focus effect */
    box-shadow: 0 1px 0 #2392F3 inset, 0 -1px 0 #2392F3 inset, 1px 0 0 #2392F3 inset, -1px 0 0 #2392F3 inset, 0 0 4px rgba(35,146,243,0.5);
    outline: none;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAPCAQAAACCCB01AAAAV0lEQVQIW2NgYDg74ex/MJzAAOU0nHUA0xMYIOJA7gIQC8KFQwzuASTuAoazAmc/QDkXzgqAzBaAKoQBoDgKF2IJlCNwtgCVi1/xAyD3AUI2AGh3AYgFAImLeCPFitxPAAAAAElFTkSuQmCC) 12px 50% no-repeat, #FFF;
}

Frame

Back to list

DOM structure 

<div id="frame_cnt_761" class="ui-control" style="...">
    <div class="ui-control-frame" style="...">
        <div class="ui-control-frame-legend">...</div>
    </div>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-frame The frame element (the box)
ui-control-frame-legend The frame title element

CSS selector samples 

.ui-control-frame {
	/* forcing a global frame border */
	border: 1px dashed red !important;
}

.ui-control-frame-legend {
	/* adds a simple shadow to the frame title */
	text-shadow: 2px 2px #ccc;
}

Grid

Back to list

DOM structure 

<div id="grid_cnt_754" class="ui-control">
    <div id="grid_754_container" class="ui-grid-container">
        <table id="grid_754" class="ui-grid">
            <colgroup>...</colgroup>
            <tbody>
                <tr>
                    <td style="..." class="ui-grid-headers ui-grid-row-headers">
                        <div class="ui-grid-celltext">...</div>
                        <span class="ui-grid-bitmap"></span>
                    </td>
                    ...
                </tr>
                ...
            </tbody>
        </table>
        <div class="ui-grid-cursor" style="..."></div>
        ...
        scrollbars (vertical + horizontal)
        ...
        <div id="grid_754_pager" class="ui-grid-pager">
          <div><input class="ui-control-button ui-paged-prev" type="button"></div>
          <div><input class="ui-control-button ui-paged-pgprev" type="button"></div>
          <div><input class="ui-control-button ui-paged-pgnext" type="button"></div>
          <div><input class="ui-control-button ui-paged-next" type="button"></div>
        </div>
    </div>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-grid-container Grid component container
ui-grid Grid component
ui-grid-headers Applied to the headers cells
ui-grid-row-headers Applied to the row headings cells
ui-grid-col-headers Applied to the column headings cells
ui-grid-celltext Wraps the cell text
ui-grid-bitmap Cell bitmap (if any)
ui-grid-cursor Grid cursor frame
ui-grid-cursor-color Applied to the selected cell
ui-grid-pager Grid pager (paged style)
ui-paged-first ui-paged-last ui-paged-prev ui-paged-next Grid pager buttons

CSS selector samples 

.ui-grid-cursor {
    /* changes cursor frame color */
    background-color: green;
}

.ui-grid-headers {
    /* adds a simple shadow to the headers */
    text-shadow: 2px 2px #ccc;
}

.ui-grid-pager .ui-paged-next {
    /* changes the icon of the next button */
    background-image: url(...);
}

Label

Back to list

DOM structure 

<div id="label_cnt_849" class="ui-control" style="...">
    <div id="label_849" class="ui-control-label" style="...">...</div>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-label The label element

CSS selector samples 

.ui-control-label {
	/* adds a simple shadow to the text */
	text-shadow: 2px 2px #ccc;
}

List-Box

DOM structure 

<div id="list_cnt_749" class="ui-control">
    <div id="list_749" class="ui-control-listbox">
        <table>
            <colgroup>...</colgroup>
            <tbody>
                <tr>
                  <td>...</td>
                </tr>
                <tr class="listbox-selected">
                  <td>...</td>
                </tr>
                ...
            </tbody>
        </table>
    </div>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-listbox List-box component
ui-control-listbox tr List-box rows
ui-control-listbox tr.listbox-selected Selected row
ui-control-listbox-win32native Applied to the element when WIN32_NATIVECTLS is set to true
ui-paged-first ui-paged-last ui-paged-prev ui-paged-next Paged list-box buttons

CSS selector samples 

.ui-control-listbox tr.listbox-selected {
    /* changes selection color */
    background-color: red;
}

.ui-paged-next {
    /* changes the icon of the next button */
    background-image: url(...);
}

Menu

Back to list

DOM structure 

<div id="window_837_menu" class="ui-winbase">
    <ul id="menu_838" class="ui-control-menubar">
        <li value="1000" sub="839" data-accelerator="70">
            <div class="ui-control-menuitem">...</div>
        </li>
        ...
    </ul>
</div>

CSS class list

ui-winbase Generic container used for the windows
ui-control-menubar Menu-bar component
ui-control-context-menu Popup menu component
ui-control-menuitem Generic menu-item
ui-control-menuarrow Sub-menu arrow
ui-control-menucheck Menu item check mark
separator Menu separator item
ui-control-context-menu-li-hovered Class applied on mouse over
ui-control-context-menu-li-pressed Class applied on item click
ui-control-main-menu-li-hovered Class applied on mouse over

CSS selector samples 

.ui-control-menubar,
.ui-control-menuitem {
    /* forcing white background */
    background-color: white !important;
    border-color: white !important;
}

Push-Button

Back to list

DOM structure 

<div id="button_cnt_822" class="ui-control" style="...">
    <button id="button_822" type="button" class="ui-control-button">...</button>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-button The button element
ui-control-button-default Applied to the button element when default-button style is set
ui-control-button-disabled Applied to the button element when disabled
ui-button-win32native Applied to the button when WIN32_NATIVECTLS is set to true
ui-button-link Applied to the button element when islink style is set
ui-button-flat Applied to the button element when flat style is set

CSS selector samples 

.ui-control-button {
	/* buttons with rounded corners */
	border-radius: 5px;
}

button.ui-control-button-disabled {
	/* nearly transparent button when disabled */
	opacity: 0.3;
}

Radio-Button

Back to list

DOM structure 

<div id="radio_cnt_937" class="ui-control" style="..." tabindex="0">
    <div id="radio_937" class="ui-control-radiobutton" data-group="..." style="...">
        <div class="ui-control-bull"><div></div></div>
        <legend style="...">...</legend>
    </div>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-radiobutton The radio-button element
ui-control-bull The radio-button bullseye
ui-control-left-text Applied to the main element when left-text style is set
ui-control-radiobutton-win32native Applied to the radio-button when WIN32_NATIVECTLS is set to true
ui-button-flat Applied to the radio-button element when flat style is set
checked Applied to the div.ui-control-bull when the radio-button is checked

CSS selector samples 

.ui-control-radiobutton legend {
	/* adds a simple shadow to the radio-button text */
	text-shadow: 2px 2px #ccc;
}

.ui-control-radiobutton .checked {
	/* change the radio bullseye border when is selected */
	border-color: #ff0000 !important;
	border-style: solid !important;
}

Scroll-Bar

Back to list

DOM structure 

<div class="dom-scrollbar ui-widget-content v-scrollbar s-hasButtons">
    <button class="dom-scrollbar-button dom-scrollbar-up_btn" href="#"></button>
    <div class="dom-scrollbar-cnt">
        <div class="dom-scrollbar-header">
            <div class="dom-scrollbar-pager" style="..."></div>
        </div>
    </div>
    <button class="dom-scrollbar-button dom-scrollbar-down_btn" href="#"></button>
</div>

CSS class list

dom-scrollbar Parent div wrapping the component
dom-scrollbar-button Scroll-bar buttons
dom-scrollbar-cnt Scroll-bar pager container
dom-scrollbar-pager Scroll-bar pager

CSS selector samples 

/* modern scrollbar */

.dom-scrollbar-header {
    padding: 3px;
    background-color: transparent;
}

.dom-scrollbar-pager {
    border-radius: 5px;
}

.dom-scrollbar-cnt {
    background-color: #555;
}

Status-Bar

Back to list

DOM structure 

<div id="sbar_cnt_878" class="ui-control">
    <ul id="sbar_878" class="ui-control-statusbar">
        <li style="..."></li>
        <li style="..."></li>
        ...
    </ul>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-statusbar The statusbar component
ui-control-statusbar-win32native Applied to the element when WIN32_NATIVECTLS is set to true
ui-control-statusbar > li Statusbar panels

CSS selector samples 

.ui-control-statusbar > li {
    /* removing border from panels */
    border: 0 !important;
    color: #333;
}

.ui-control-statusbar {
    /* adding a gradient and a border to the statusbar*/
    background: linear-gradient(#ddd, #fff);
    border-top: 1px solid #bbb;
}

Tab-Control

Back to list

DOM structure 

<div id="tab_cnt_950" class="ui-control">
    <div id="tab_950" class="ui-control-tabs">
        <ul>
            <li class="tab-selected">...</li>
            <li>...</li>
            ...
        </ul>
    </div>
    <div class="ui-tab-scroller">
        <div class="ui-tab-scroller-prev"></div>
        <div class="ui-tab-scroller-next"></div>
    </div>
    <div id="tab_950_page" class="ui-control-tab-page"></div>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-tabs Tabs container
ui-control-tabs-win32native Applied to the element when WIN32_NATIVECTLS is set to true
ui-control-tabs li Tabs
ui-control-tabs li.tab-selected Current Tab
ui-tab-scroller Tabs pager (scroll facility)
ui-control-tab-page Tab page/body
ui-control-tabs-bottom Applied to the main element when bottom style is set
ui-control-tabs-vertical Applied to the main element when vertical style is set
tabs-rounded-label Applied to the tabs when rounded style is set

CSS selector samples 

.ui-control-tabs li.tab-selected {
    /* change foreground color of the selected tab */
    color: red;
}

Tree-View

Back to list

DOM structure 

 <div id="tree_cnt_880" class="ui-control">
    <div id="tree_880" class="ui-treeview">
        <div class="ui-treeview-root ui-treeview-item-expanded">
            <div class="ui-treeview-children">
                <div class="ui-treeview-item ui-treeview-item-expanded">
                    <div class="ui-treeview-item-text">...</div>
                    <div class="ui-treeview-children">
                       ...
                    </div>
                </div>
                ...
            </div>
        </div>
    </div>
</div>

DIV.UI-TREEVIEW-ITEM-TEXT structure 

<div class="ui-treeview-item-text">
    <span class="ui-treeview-button"></span>
    <span class="ui-treeview-text">
        <span class="ui-treeview-icon">...</span>
        <span class="ui-treeview-txt">...</span>
    </span>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-treeview Tree-view component
ui-treeview-root Hidden root node
ui-treeview-children Children container
ui-treeview-item Tree-view node container (node + children)
ui-treeview-item-text Tree-view node
ui-treeview-item-expanded Added when the tree-view node is expanded
ui-treeview-styles-buttons Applied to the tree-view when buttons style is set
ui-treeview-styles-showlines Applied to the tree-view when show-lines style is set
ui-treeview-styles-linesatroot Applied to the tree-view when lines-at-root style is set
ui-treeview-button Expand/collapse button
ui-treeview-text Tree-view node label (icon + text)
ui-treeview-icon Tree-view node icon
ui-treeview-txt Tree-view node text

CSS selector samples 

.ui-treeview-styles-buttons .ui-treeview-button {
    /* changes image strip used for the treeview items button */
    background-image: url(...);
}

.ui-treeview-item-text {
    /* removes items indentation */
    padding-left: 25px !important;
}

Web-Browser

Back to list

DOM structure 

<div id="web_cnt_752" class="ui-control">
    <iframe id="web_752" class="ui-control-browser" style="..." src="..."></iframe>
</div>

CSS class list

ui-control Parent div wrapping the component
ui-control-browser The iframe element

CSS selector samples 

.ui-control-browser {
	/* removing the border */
	border: 0;
}

Window

Back to list

DOM structure 

<div id="window_818_cnt" class="ui-cblwindow">
    <div id="window_818_title" class="ui-wintitle">
        <span class="ui-wintitle-text">...</span>
        <span class="ui-winbtn ui-winbtn-close"></span>
    </div>
    <div id="window_818_menu" class="ui-winbase">
    ...
    </div>
    <div id="window_818_tool" class="ui-winbase">
    ...
    </div>
    <div id="window_818" class="ui-winbase">
    ...
    </div>
</div>

CSS class list

ui-winbase Generic container used for the windows
ui-cblwindow Window component
ui-wintitle Window title bar
ui-wintitle-text Wraps title bar text
ui-winbtn Window title bar buttons
ui-cblwindow-active Applied on the active window

CSS selector samples 

.ui-cblwindow .ui-wintitle {
    /* gradient on title bar */
    background: linear-gradient(to bottom,  #7abcff 0%,#60abf8 44%,#4096ee 100%);
    color: #04509C;
}

.ui-cblwindow {
    /* window with rounded corner */
    border-radius: 5px; 
}
Parent topic: Cascading Style Sheets