Qt Style Sheets Reference

All derivatives of QAbstractScrollArea, including QTextEdit, and QAbstractItemView (all item view classes), support scrollable backgrounds using background-attachment. Setting the background-attachment to fixed provides a background-image that does not scroll with the viewport. Setting the background-attachment to scroll, scrolls the background-image when the scroll bars move.

See Customizing QAbstractScrollArea for an example.

If you subclass from QDialog, you need to provide a paintEvent for your custom QDialog as below:

 void CustomDialog::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.

In the case of a checkable QGroupBox, the title includes the check indicator. The indicator is styled using the the ::indicator subcontrol. The spacing property can be used to control the spacing between the text and indicator.

See Customizing QGroupBox for an example.

Since 4.3, setting a stylesheet on a QLabel automatically sets the QFrame::frameStyle property to QFrame::StyledPanel.

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

The color and background of the selected item is styled using selection-color and selection-background-color respectively.

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

See QAbsractScrollArea to style scrollable backgrounds.

Individual items are styled using the ::item subcontrol. In addition to the usually supported pseudo states, item subcontrol supports the :selected, :default, :exclusive and the non-exclusive pseudo states.

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 ::tear-off.

See Customizing QMenu for an example.

For QPushButton with a menu, the menu indicator is styled using the ::menu-indicator subcontrol. Appearance of checkable push buttons can be customized using the :open and :closed pseudo-states.

See Customizing QPushButton for an example.

The slider can be styled using the ::handle subcontrol. Setting the min-width or min-height provides size contraints for the slider depending on the orientation.

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.

The groove of the slider is styled using the ::groove. The groove is positioned by default in the Contents rectangle of the widget. The thumb of the slider is styled using ::handle subcontrol. The subcontrol moves in the Contents rectangle of the groove subcontrol.

See Customizing QSlider for an example.

See Customizing QSplitter for an example.

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

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 color and background of the selected item is styled using selection-color and selection-background-color respectively.

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

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

See QAbsractScrollArea to style scrollable backgrounds.

The color and background of selected text is styled using selection-color and selection-background-color respectively.

See QAbsractScrollArea to style scrollable backgrounds.

The :top, :left, :right, :bottom pseudo states depending on the area in which the tool bar is grouped.

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.

The individual tabs can by styled using the ::tab subcontrol. The tabs support the :only-one, :first, :last, :middle, :previous-selected, :next-selected, :selected pseudo states.

The color and background of the selected item is styled using selection-color and selection-background-color respectively.

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.

See QAbsractScrollArea to style scrollable backgrounds.

See Customizing QTreeView for an example to style the branches.

If you subclass from QWidget, you need to provide a paintEvent for your custom QWidget as below:

 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.

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.

Examples:

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

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

Example:

  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 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, QDialog, 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.

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.

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 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::font.

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

Example:

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

Example:

  QTextEdit { font-size: 12px }

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.

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 }

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.

Example:

     QSpinBox { max-height: 24px }

See also max-width.

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 width is derived based on the widget's contents and the style.

Example:

     QComboBox { min-width: 72px }

See also min-height.

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 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 HighlightedText role.

Example:

     QTextEdit { selection-color: white }

See also selection-background-color and color.

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, 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 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.

Example:

 QTextEdit { background-position: bottom center }

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

• px: pixels (the default when no units are specified)
• 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')

• 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.