See Customizing QAbstractScrollArea for an example.

See Customizing QCheckBox for an example.

When the title bar is vertical, the :vertical pseudo class is set. In addition, depending on QDockWidget::DockWidgetFeature, the :closable, :floatable and :movable pseudo states are set.

Note: Use QMainWindow::separator to style the resize handle.

Warning: The style sheet has no effect when the QDockWidget is undocked as Qt uses native top level windows when undocked.

See Customizing QDockWidget for an example.

See Customizing QFrame for an example.

See Customizing QGroupBox for an example.

See Customizing QHeaderView for an example.

See Customizing QFrame for an example (a QLabel derives from QFrame).

The password character can be styled using the lineedit-password-character property.

The password mask delay can be changed using the lineedit-password-mask-delay

See Customizing QLineEdit for an example.

The selection behavior is controlled by the show-decoration-selected property.

Use the ::item subcontrol for more fine grained control over the items in the QListView.

See QAbsractScrollArea to style scrollable backgrounds.

See Customzing QListView for an example.

See Customizing QMainWindow for an example.

The indicator of checkable menu items is styled using the ::indicator subcontrol.

The separator is styled using the ::separator subcontrol.

For items with a sub menu, the arrow marks are styled using the right-arrow and left-arrow.

The scroller is styled using the ::scroller.

The tear-off is styled using the ::tearoff.

See Customizing QMenu for an example.

See Customizing QMenuBar for an example.

Indeterminate progress bars have the :indeterminate pseudo state set.

See Customizing QProgressBar for an example.

Warning: If you only set a background-color on a QPushButton, the background may not appear unless you set the border property to some value. This is because, by default, the QPushButton draws a native border which completely overlaps the background-color. For example,

QPushButton { background-color: red; border: none; }

See Customizing QPushButton for an example.

See Customizing QRadioButton for an example.

The ::add-line subcontrol can be used to style the button to add a line. By default, the add-line subcontrol is placed in top right corner of the Border rectangle of the widget. Depending on the orientation the ::right-arrow or ::down-arrow. By default, the arrows are placed in the center of the Contents rectangle of the add-line subcontrol.

The ::sub-line subcontrol can be used to style the button to subtract a line. By default, the sub-line subcontrol is placed in bottom right corner of the Border rectangle of the widget. Depending on the orientation the ::left-arrow or ::up-arrow. By default, the arrows are placed in the center of the Contents rectangle of the sub-line subcontrol.

The ::sub-page subcontrol can be used to style the region of the slider that subtracts a page. The ::add-page subcontrol can be used to style the region of the slider that adds a page.

See Customizing QScrollBar for an example.

See Customizing QSlider for an example.

The down button and arrow can be styled using the ::down-button and ::down-arrow subcontrols. By default, the down-button is placed in the bottom right corner in the Padding rectangle of the widget. Without an explicit size, it occupies half the height of its reference rectangle. The bottom-arrow is placed in the center of the Contents rectangle of the bottom-button.

See Customizing QSpinBox for an example.

Overlapping tabs for the selected state are created by using negative margins or using the absolute position scheme.

The tear indicator of the QTabBar is styled using the ::tear subcontrol.

QTabBar used two QToolButtons for its scrollers that can be styled using the QTabBar QToolButton selector. To specify the width of the scroll button use the ::scroller subcontrol.

The alignment of the tabs within the QTabBar is styled using the alignment property.

Warning:

To change the position of the QTabBar within a QTabWidget, use the tab-bar subcontrol (and set subcontrol-position).

See Customizing QTabBar for an example.

The :top, :left, :right, :bottom pseudo states depending on the orientation of the tabs.

See Customizing QTabWidget for an example.

The corner widget in a QTableView is implemented as a QAbstractButton and can be styled using the "QTableView QTableCornerButton::section" selector.

Warning: If you only set a background-color on a QTableCornerButton, the background may not appear unless you set the border property to some value. This is because, by default, the QTableCornerButton draws a native border which completely overlaps the background-color.

The color of the grid can be specified using the gridline-color property.

See QAbsractScrollArea to style scrollable backgrounds.

See Customzing QTableView for an example.

See QAbsractScrollArea to style scrollable backgrounds.

The :first, :last, :middle, :only-one pseudo states indicator the position of the tool bar within a line group (See QStyleOptionToolBar::positionWithinLine).

The separator of a QToolBar is styled using the ::separator subcontrol.

The handle (to move the toolbar) is styled using the ::handle subcontrol.

See Customizing QToolBar for an example.

If the QToolButton is in QToolButton::MenuButtonPopup mode, the ::menu-button subcontrol is used to draw the menu button. ::menu-arrow subcontrol is used to draw the menu arrow inside the menu-button. By default, it is positioned in the center of the Contents rectangle of the menu-button subcontrol.

When the QToolButton displays arrows, the ::up-arrow, ::down-arrow, ::left-arrow and ::right-arrow subcontrols are used.

Warning: If you only set a background-color on a QToolButton, the background will not appear unless you set the border property to some value. This is because, by default, the QToolButton draws a native border which completely overlaps the background-color. For example,

QToolButton { background-color: red; border: none; }

See Customizing QToolButton for an example.

The selection behavior is controlled by the show-decoration-selected property.

The branches of the tree view can be styled using the ::branch subcontrol. The ::branch Sub-control supports the :open, :closed, :has-sibling and :has-children pseudo states.

Use the ::item subcontrol for more fine grained control over the items in the QTreeView.

See QAbsractScrollArea to style scrollable backgrounds.

See Customizing QTreeView for an example to style the branches.

void CustomWidget::paintEvent(QPaintEvent *)
{
    QStyleOption opt;
    opt.init(this);
    QPainter p(this);
    style()->drawPrimitive(QStyle::PE_Widget, &opt, &p, this);
}

The above code is a no-operation if there is no stylesheet set.

Warning: Make sure you define the Q_OBJECT macro for your custom widget.

Example:

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

See also background and selection-background-color.

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.

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

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

Example:

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

Example:

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

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

See also background

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.

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.

Example:

QLineEdit { border: 1px solid white }

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.

See also border-color, border-style, 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 0.

Example:

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

See also border-width and The Box Model.

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.

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.

Example:

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

See also left, right, and top.

Example:

* { button-layout: 2 }

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.

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.

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

Example:

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

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

QTextEdit { font-size: 12px }

QTextEdit { font-style: italic }

Example:

* { gridline-color: gray }

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.

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

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 this property is not specified, it defaults to 0.

Example:

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

See also right, top, and bottom.

Example:

* { lineedit-password-character: 9679 }

This property was added in Qt 5.4.

Example:

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

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

Example:

QLineEdit { margin: 2px }

See also padding, spacing, and The Box Model.

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

Example:

QSpinBox { max-height: 24px }

See also max-width.

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

Example:

QComboBox { max-width: 72px }

See also max-height.

Example:

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

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.

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.

Example:

QToolTip { opacity: 223 }

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

Example:

QLineEdit { padding: 3px }

See also margin, spacing, and The Box Model.

Example:

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

See also left, top, and bottom.

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.

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.

Example:

* { show-decoration-selected: 1 }

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.

Example:

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

See also subcontrol-position.

Example:

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

See also subcontrol-origin.

Example:

QPushButton {
    text-align: left;
}

This property is currently supported only by QPushButton and QProgressBar.

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

Example:

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

See also left, right, and bottom.

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.

QTextEdit { background-position: bottom center }

QDialog { etch-disabled-text: 1 }

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 */

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 */

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)
}

* {
    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.

QPushButton { color: palette(dark); }

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