If this property is not set, the default value is whatever is set for the palette's AlternateBase role.

Example:

QTreeView {
    alternate-background-color: blue;
    background: yellow;
}

See also background and selection-background-color.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QDialog, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip, and plain QWidgets.

Example:

QTextEdit { background: yellow }

Often, it is required to set a fill pattern similar to the styles in Qt::BrushStyle. You can use the background-color property for Qt::SolidPattern, Qt::RadialGradientPattern, Qt::LinearGradientPattern and Qt::ConicalGradientPattern. The other patterns are easily achieved by creating a background image that contains the pattern.

Example:

QLabel {
    background-image: url(dense6pattern.png);
    background-repeat: repeat-xy;
}

See also background-origin, selection-background-color, background-clip, background-attachment and alternate-background-color.

Examples:

QLabel { background-color: yellow }
QLineEdit { background-color: rgb(255, 0, 0) }

Example:

QFrame { background-image: url(:/images/hydro.png) }

If this property is not specified, the background image is repeated in both directions (repeat).

Example:

QFrame {
    background: white url(:/images/ring.png);
    background-repeat: repeat-y;
    background-position: left;
}

If this property is not specified, the alignment is top left.

Example:

QFrame {
    background: url(:/images/footer.png);
    background-position: bottom left;
}

Example:

QTextEdit {
    background-image: url("leaves.png");
    background-attachment: fixed;
}

See also background

This property specifies the rectangle to which the background-color and background-image are clipped.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QDialog, QFrame, QGroupBox, QLabel, QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip, and plain QWidgets.

If this property is not specified, the default is border.

Example:

QFrame {
    background-image: url(:/images/header.png);
    background-position: top left;
    background-origin: content;
    background-clip: padding;
}

See also background, background-origin and The Box Model.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QDialog, QFrame, QGroupBox, QLabel, QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip, and plain QWidgets.

If this property is not specified, the default is padding.

Example:

QFrame {
    background-image: url(:/images/header.png);
    background-position: top left;
    background-origin: content;
}

See also background and The Box Model.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip, and plain QWidgets.

Example:

QLineEdit { border: 1px solid white }

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit, QToolTip, and plain QWidgets.

If this property is not specified, it defaults to color (i.e., the widget's foreground color).

Example:

QLineEdit {
    border-width: 1px;
    border-style: solid;
    border-color: white;
}

See also border-style, border-width, border-image, and The Box Model.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit and QToolTip.

See also border-color, border-style, border-width, and The Box Model.

The border-radius clips the element's background.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit, and QToolTip.

If this property is not specified, it defaults to 0.

Example:

QLineEdit {
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
}

See also border-width and The Box Model.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit, and QToolTip.

If this property is not specified, it defaults to none.

Example:

QLineEdit {
    border-width: 1px;
    border-style: solid;
    border-color: blue;
}

See also border-color, border-style, border-image, and The Box Model.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit, and QToolTip.

Example:

QLineEdit {
    border-width: 2px;
    border-style: solid;
    border-color: darkblue;
}

See also border-color, border-radius, border-style, border-image, and The Box Model.

If position is absolute, the bottom property specifies the subcontrol's bottom edge in relation to the parent's bottom edge (see also subcontrol-origin).

Example:

QSpinBox::down-button { bottom: 2px }

See also left, right, and top.

If this property is not specified, it defaults to the value specified by the current style for the SH_DialogButtonLayout style hint.

Example:

* { button-layout: 2 }

This property is supported by all widgets that respect the QWidget::palette.

If this property is not set, the default is whatever is set for in the widget's palette for the QWidget::foregroundRole (typically black).

Example:

QPushButton { color: red }

See also background and selection-color.

If this property is set to 1, the buttons of a QDialogButtonBox show icons; if it is set to 0, the icons are not shown.

See the List of Icons section for information on how to set icons.

QDialogButtonBox { dialogbuttonbox-buttons-have-icons: 1; }

Note: Styles defining this property must be applied before the QDialogButtonBox is created; this means that you must apply the style to the parent widget or to the application itself.

This property is supported by all widgets that respect the QWidget::font.

If this property is not set, the default is the QWidget::font.

Example:

QCheckBox { font: bold italic large "Times New Roman" }

Example:

QCheckBox { font-family: "New Century Schoolbook" }

Example:

QTextEdit { font-size: 12px }

Example:

QTextEdit { font-style: italic }

If this property is not specified, it defaults to the value specified by the current style for the SH_Table_GridLineColor style hint.

Example:

* { gridline-color: gray }

If this property is not specified, it defaults to a value that depends on the subcontrol/widget and on the current style.

Warning: Unless otherwise specified, this property has no effect when set on widgets. If you want a widget with a fixed height, set the min-height and max-height to the same value.

Example:

QSpinBox::down-button { height: 10px }

See also width.

The icon size of the following widgets can be set using this property.

• QCheckBox
• QListView
• QPushButton
• QRadioButton
• QTabBar
• QToolBar
• QToolBox
• QTreeView

The image property accepts a list of Urls or an svg. The actual image that is drawn is determined using the same algorithm as QIcon (i.e) the image is never scaled up but always scaled down if necessary. If a svg is specified, the image is scaled to the size of the contents rectangle.

Setting the image property on sub controls implicitly sets the width and height of the sub-control (unless the image in a SVG).

In Qt 4.3 and later, the alignment of the image within the rectangle can be specified using image-position.

This property is for subcontrols only--we don't support it for other elements.

Warning: The QIcon SVG plugin is needed to render SVG images.

Example:

/* implicitly sets the size of down-button to the size of spindown.png */
QSpinBox::down-button { image: url(:/images/spindown.png) }

If position is absolute, the left property specifies the subcontrol's left edge in relation to the parent's left edge (see also subcontrol-origin).

If this property is not specified, it defaults to 0.

Example:

QSpinBox::down-button { left: 2px }

See also right, top, and bottom.

If this property is not specified, it defaults to the value specified by the current style for the SH_LineEdit_PasswordCharacter style hint.

Example:

* { lineedit-password-character: 9679 }

If this property is not specified, it defaults to the value specified by the current style for the SH_LineEdit_PasswordMaskDelay style hint.

This property was added in Qt 5.4.

Example:

* { lineedit-password-mask-delay: 1000 }

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit, and QToolTip.

If this property is not specified, it defaults to 0.

Example:

QLineEdit { margin: 2px }

See also padding, spacing, and The Box Model.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox, QSplitter, QStatusBar, QTextEdit, and QToolTip.

The value is relative to the contents rect in the box model.

Example:

QSpinBox { max-height: 24px }

See also max-width.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox, QSplitter, QStatusBar, QTextEdit, and QToolTip.

The value is relative to the contents rect in the box model.

Example:

QComboBox { max-width: 72px }

See also max-height.

If this property is not specified, it defaults to the value specified by the current style for the SH_MessageBox_TextInteractionFlags style hint.

Example:

QMessageBox { messagebox-text-interaction-flags: 5 }

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox, QSplitter, QStatusBar, QTextEdit, and QToolTip.

If this property is not specified, the minimum height is derived based on the widget's contents and the style.

The value is relative to the contents rect in the box model.

Example:

QComboBox { min-height: 24px }

See also min-width.

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSizeGrip, QSpinBox, QSplitter, QStatusBar, QTextEdit, and QToolTip.

If this property is not specified, the minimum width is derived based on the widget's contents and the style.

The value is relative to the contents rect in the box model.

Example:

QComboBox { min-width: 72px }

See also min-height.

If this property is not specified, it defaults to the value specified by the current style for the SH_ToolTipLabel_Opacity style hint.

Example:

QToolTip { opacity: 223 }

This property is supported by QAbstractItemView subclasses, QAbstractSpinBox subclasses, QCheckBox, QComboBox, QFrame, QGroupBox, QLabel, QLineEdit, QMenu, QMenuBar, QPushButton, QRadioButton, QSplitter, QTextEdit, and QToolTip.

If this property is not specified, it defaults to 0.

Example:

QLineEdit { padding: 3px }

See also margin, spacing, and The Box Model.

If this property is not specified, it defaults to relative.

If position is absolute, the right property specifies the subcontrol's right edge in relation to the parent's right edge (see also subcontrol-origin).

Example:

QSpinBox::down-button { right: 2px }

See also left, top, and bottom.

This property is supported by all widgets that respect the QWidget::palette and that show selection text.

If this property is not set, the default value is whatever is set for the palette's Highlight role.

Example:

QTextEdit { selection-background-color: darkblue }

See also selection-color and background.

This property is supported by all widgets that respect the QWidget::palette and that show selection text.

If this property is not set, the default value is whatever is set for the palette's HighlightedText role.

Example:

QTextEdit { selection-color: white }

See also selection-background-color and color.

If this property is not specified, it defaults to the value specified by the current style for the SH_ItemView_ShowDecorationSelected style hint.

Example:

* { show-decoration-selected: 1 }

This property is supported by QCheckBox, checkable QGroupBoxes, QMenuBar, and QRadioButton.

If this property is not specified, the default value depends on the widget and on the current style.

Example:

QMenuBar { spacing: 10 }

See also padding and margin.

If this property is not specified, the default is padding.

Example:

QSpinBox::up-button {
    image: url(:/images/spinup.png);
    subcontrol-origin: content;
    subcontrol-position: right top;
}

See also subcontrol-position.

If this property is not specified, it defaults to a value that depends on the subcontrol.

Example:

QSpinBox::down-button {
    image: url(:/images/spindown.png);
    subcontrol-origin: padding;
    subcontrol-position: right bottom;
}

See also subcontrol-origin.

If this value is not specified, it defaults to the value that depends on the native style.

Example:

QPushButton {
    text-align: left;
}

This property is currently supported only by QPushButton and QProgressBar.

If position is absolute, the top property specifies the subcontrol's top edge in relation to the parent's top edge (see also subcontrol-origin).

If this property is not specified, it defaults to 0.

Example:

QSpinBox::up-button { top: 2px }

See also left, right, and bottom.

If this property is not specified, it defaults to a value that depends on the subcontrol/widget and on the current style.

Warning: Unless otherwise specified, this property has no effect when set on widgets. If you want a widget with a fixed width, set the min-width and max-width to the same value.

Example:

QSpinBox::up-button { width: 12px }

See also height.

Example:

QTextEdit { background-position: bottom center }

Example:

QDialog { etch-disabled-text: 1 }

See the CSS3 Draft Specification for details.

Example:

QLabel { border-color: red }   /* red red red red */
QLabel { border-color: red blue } /* red blue red blue */
QLabel { border-color: red blue green } /* red blue green blue */
QLabel { border-color: red blue green yellow }  /* red blue green yellow */

Examples:

QLabel { border-width: 1px }                    /* 1px 1px 1px 1px */
QLabel { border-width: 1px 2px }                /* 1px 2px 1px 2px */
QLabel { border-width: 1px 2px 3px }            /* 1px 2px 3px 2px */
QLabel { border-width: 1px 2px 3px 4px }        /* 1px 2px 3px 4px */

Examples:

QLabel { border-color: red }                    /* opaque red */
QLabel { border-color: #FF0000 }                /* opaque red */
QLabel { border-color: rgba(255, 0, 0, 75%) }   /* 75% opaque red */
QLabel { border-color: rgb(255, 0, 0) }         /* opaque red */
QLabel { border-color: rgb(100%, 0%, 0%) }      /* opaque red */
QLabel { border-color: hsv(60, 255, 255) }      /* opaque yellow */
QLabel { border-color: hsva(240, 255, 255, 75%) }      /* 75% blue */

Note: The RGB colors allowed are the same as those allowed with CSS 2.1, as listed here.

• Linear gradients interpolate colors between start and end points.
• Radial gradients interpolate colors between a focal point and end points on a circle surrounding it.
• Conical gradients interpolate colors around a center point.

Gradients are specified in Object Bounding Mode. Imagine the box in which the gradient is rendered, to have its top left corner at (0, 0) and its bottom right corner at (1, 1). Gradient parameters are then specified as percentages from 0 to 1. These values are extrapolated to actual box coordinates at runtime. It is possible specify values that lie outside the bounding box (-0.6 or 1.8, for instance).

Warning: The stops have to appear sorted in ascending order.

Examples:

/* linear gradient from white to green */
QTextEdit {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
                stop:0 white, stop: 0.4 gray, stop:1 green)
}

/* linear gradient from white to green */
QTextEdit {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1,
                stop:0 white, stop: 0.4 rgba(10, 20, 30, 40), stop:1 rgb(0, 200, 230, 200))
}

/* conical gradient from white to green */
QTextEdit {
    background: qconicalgradient(cx:0.5, cy:0.5, angle:30,
                stop:0 white, stop:1 #00FF00)
}

/* radial gradient from white to green */
QTextEdit {
    background: qradialgradient(cx:0, cy:0, radius: 1,
                fx:0.5, fy:0.5, stop:0 white, stop:1 green)
}

Example:

* {
    file-icon: url(file.png),
               url(file_selected.png) selected;
  }

QMessageBox {
    dialogbuttonbox-buttons-have-icons: true;
    dialog-ok-icon: url(ok.svg);
    dialog-cancel-icon: url(cancel.png), url(grayed_cancel.png) disabled;
}

• px: pixels
• pt: the size of one point (i.e., 1/72 of an inch)
• em: the em width of the font (i.e., the width of 'M')
• ex: the ex width of the font (i.e., the height of 'x')

However, Qt is limited to font sizes in pt and px and any other size must be in px, em or ex.

• margin: The margin rectangle. The margin falls outside the border.
• border: The border rectangle. This is where any border is drawn.
• padding: The padding rectangle. Unlike the margins, padding is located inside the border.
• content: The content rectangle. This specifies where the actual contents go, excluding any padding, border, or margin.

See also The Box Model.

For example,

QPushButton { color: palette(dark); }

• repeat-x: Repeat horizontally.
• repeat-y: Repeat vertically.
• repeat: Repeat horizontally and vertically.
• no-repeat: Don't repeat.