Supported CSS Selectors

Since Codename One stylesheets are meant to be used with Codename One component hierarchies instead of XML/HTML documents, selectors work a little differently.

1. All selectors (with some specific exceptions discussed below) are interpreted as UIIDs.

2. Only 4 predefined CSS classes are supported:

3. .pressed - Targets the component when in "Pressed" state.

4. .selected - Targets the component when in "Selected" state.

5. .unselected - Targets the component when in "Unselected" state.

6. .disabled - Targets the component when in "Disabled" state.

   If no class is specified, then the selector targets "all" states of the given component.

The following are a few possible selectors you can include in your stylesheet.

1. Button - Defines styles for the "Button" UIID.

2. Button.pressed - Defines styles for the "Button" UIID’s "pressed" state.

3. `Button, TextField, Form ` - Defines styles for the "Button", "TextField", and "Form" UIIDs.

Example 1:

The following example creates a simple button with a border, and text aligned center. By default the button will have a transparent background, but when it is pressed, it will have a gray background:

Button {
    text-align: center;
    border: 1pt solid gray;
    background-color: transparent;
}

Button.pressed {
    background-color: gray;
}