Datebox

Datebox
Prev	1. XUL Components	Next

Datebox is composed of two parts, an input box and a popup.

CSS Definition	Description	Default Values
`span.datebox`	`The outline of datebox`	`border: 0; padding: 0; margin: 0; white-space: nowrap;`
`.dateboxinp`	`The outline of datebox's input`	`background: #FFF url(` `${c:encodeURL('~./zul/img/grid/text-bg.gif')}` `) repeat-x 0 0;` `repeat-x scroll 0pt;` `border:1px solid #7F9DB9;`
`span.` `rbtnbk`	`The outline of datebox's button`	`background-image: url(` `${c:encodeURL('~./zul/img/btnbk.gif')}` `); background-repeat: no-repeat;` `border: 1px solid #7f9db9; border-left: none;`

CSS Definition

Description

Default Values

div.dateboxpp

The outline of datebox's popup

display: block; position: absolute; z-index: 88000;

background: white; border: 1px solid black; padding: 2px;

Note: If you want to know the detail of Calendar CSS, please refer to Calendar component.

CSS Definition

Description

Default Values

. text-invalid

The outline of datebox

background: #FFF url( ${c:encodeURL('~./zul/img/grid/text-bg-invalid.gif')} ) repeat-x 0 0;

border: 1px solid #DD7870;

The way to customize the outline of Datebox is change the code as follows.

span.datebox {
    border:3px solid green;    
    padding:1px 0px;

}

The way to customize the background of Datebox's popup is change color as follows.

div.dateboxpp {
    background: lightblue;

Prev	Up	Next
Combobox	Home	Fileupload