Qt Style Sheets Reference¶
List of Stylable Widgets¶
The following table lists the Qt widgets that can be customized using style sheets:
Widget
How to Style
QAbstractScrollArea
.. _qabstractscrollarea-widget:Supports the box model .
All derivatives of
QAbstractScrollArea
, includingQTextEdit
, andQAbstractItemView
(all item view classes), support scrollable backgrounds using background-attachment . Setting the background-attachment tofixed
provides a background-image that does not scroll with the viewport. Setting the background-attachment toscroll
, scrolls the background-image when the scroll bars move.See Customizing QAbstractScrollArea for an example.
QCheckBox
.. _qcheckbox-widget:Supports the box model . The check indicator can be styled using the ::indicator subcontrol. By default, the indicator is placed in the Top Left corner of the Contents rectangle of the widget.
The spacing property specifies the spacing between the check indicator and the text.
See Customizing QCheckBox for an example.
QColumnView
.. _qcolumnview-widget:The grip can be styled be using the image property. The arrow indicators can by styled using the ::left-arrow subcontrol and the ::right-arrow subcontrol.
QComboBox
.. _qcombobox-widget:The frame around the combobox can be styled using the box model . The drop-down button can be styled using the ::drop-down subcontrol. By default, the drop-down button is placed in the top right corner of the padding rectangle of the widget. The arrow mark inside the drop-down button can be styled using the ::down-arrow subcontrol. By default, the arrow is placed in the center of the contents rectangle of the drop-down subcontrol.
See Customizing QComboBox for an example.
QDateEdit
.. _qdateedit-widget:See QSpinBox .
QDateTimeEdit
.. _qdatetimeedit-widget:See QSpinBox .
QDialog
.. _qdialog-widget:Supports only the background , background-clip and background-origin properties.
Warning
Make sure you define the
Q_OBJECT
macro for your custom widget.
QDialogButtonBox
.. _qdialogbuttonbox-widget:The layout of buttons can be altered using the button-layout property.
QDockWidget
.. _qdockwidget-widget:Supports styling of the title bar and the title bar buttons when docked.
The dock widget border can be styled using the border property. The ::title subcontrol can be used to customize the title bar. The close and float buttons are positioned with respect to the ::title subcontrol using the ::close-button and ::float-button respectively.
When the title bar is vertical, the :vertical pseudo class is set. In addition, depending on
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.
QDoubleSpinBox
.. _qdoublespinbox-widget:See QSpinBox .
QFrame
.. _qframe-widget:Supports the box model .
Since 4.3, setting a stylesheet on a
QLabel
automatically sets theframeStyle
property toStyledPanel
.See Customizing QFrame for an example.
QGroupBox
.. _qgroupbox-widget:Supports the box model . The title can be styled using the ::title subcontrol. By default, the title is placed depending on QGroupBox::textAlignment.
In the case of a checkable
QGroupBox
, the title includes the check indicator. The indicator is styled using the ::indicator subcontrol. The spacing property can be used to control the spacing between the text and indicator.See Customizing QGroupBox for an example.
QHeaderView
.. _qheaderview-widget:Supports the box model . The sections of the header view are styled using the ::section sub control. The
section
Sub-control supports the :middle , :first , :last , :only-one , :next-selected , :previous-selected , :selected , and :checked pseudo states.The sort indicator can be styled using the ::up-arrow and the ::down-arrow Sub-control.
See Customizing QHeaderView for an example.
QLabel
.. _qlabel-widget:Supports the box model . Does not support the :hover pseudo-state.
Since 4.3, setting a stylesheet on a
QLabel
automatically sets theframeStyle
property toStyledPanel
.See Customizing QFrame for an example (a
QLabel
derives fromQFrame
).
QLineEdit
.. _qlineedit-widget:Support the box model .
The color and background of the selected item is styled using selection-color and selection-background-color respectively.
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.
QListView
.. _qlistview-widget:Supports the box model . When
alternating row colors
is enabled, the alternating colors can be styled using the alternate-background-color property.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 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.
QListWidget
.. _qlistwidget-widget:See QListView .
QMainWindow
.. _qmainwindow-widget:Supports styling of the separator
The separator in a
QMainWindow
when usingQDockWidget
is styled using the ::separator subcontrol.See Customizing QMainWindow for an example.
QMenu
.. _qmenu-widget:Supports the box model .
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 ::tearoff .
See Customizing QMenu for an example.
QMenuBar
.. _qmenubar-widget:Supports the box model . The spacing property specifies the spacing between menu items. Individual items are styled using the ::item subcontrol.
Warning
When running on Qt/Mac, the menu bar is usually embedded into the system-wide menu bar. In this case, the style sheet will have no effect.
See Customizing QMenuBar for an example.
QMessageBox
.. _qmessagebox-widget:The messagebox-text-interaction-flags property can be used to alter the interaction with text in the message box.
QProgressBar
.. _qprogressbar-widget:Supports the box model . The chunks of the progress bar can be styled using the ::chunk subcontrol. The chunk is displayed on the Contents rectangle of the widget.
If the progress bar displays text, use the text-align property to position the text.
Indeterminate progress bars have the :indeterminate pseudo state set.
See Customizing QProgressBar for an example.
QPushButton
.. _qpushbutton-widget:Supports the box model . Supports the :default , :flat , :checked pseudo states.
Since 5.15, the icon property can be set to override the button icon.
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.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, theQPushButton
draws a native border which completely overlaps the background-color. For example,QPushButton { background-color: red; border: none; }See Customizing QPushButton for an example.
QRadioButton
.. _qradiobutton-widget:Supports the box model . The check indicator can be styled using the ::indicator subcontrol. By default, the indicator is placed in the Top Left corner of the Contents rectangle of the widget.
The spacing property specifies the spacing between the check indicator and the text.
See Customizing QRadioButton for an example.
QScrollBar
.. _qscrollbar-widget:Supports the box model . The Contents rectangle of the widget is considered to be the groove over which the slider moves. The extent of the
QScrollBar
(i.e the width or the height depending on the orientation) is set using the width or height property respectively. To determine the orientation, use the :horizontal and the :vertical pseudo states.The slider can be styled using the ::handle subcontrol. Setting the min-width or min-height provides size constraints 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.
QSizeGrip
.. _qsizegrip-widget:Supports the width , height , and image properties.
See Customizing QSizeGrip for an example.
QSlider
.. _qslider-widget:Supports the box model . For horizontal slides, the min-width and height properties must be provided. For vertical sliders, the min-height and width properties must be provided.
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.
QSpinBox
.. _qspinbox-widget:The frame of the spin box can be styled using the box model .
The up button and arrow can be styled using the ::up-button and ::up-arrow subcontrols. By default, the up-button is placed in the top right corner in the Padding rectangle of the widget. Without an explicit size, it occupies half the height of its reference rectangle. The up-arrow is placed in the center of the Contents rectangle of the up-button.
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.
QSplitter
.. _qsplitter-widget:Supports the box model . The handle of the splitter is styled using the ::handle subcontrol.
See Customizing QSplitter for an example.
QStatusBar
.. _qstatusbar-widget:Supports only the background property. The frame for individual items can be style using the ::item subcontrol.
See Customizing QStatusBar for an example.
QTabBar
.. _qtabbar-widget:Individual tabs may be styled using the ::tab subcontrol. Close buttons using the ::close-button The tabs support the :only-one , :first , :last , :middle , :previous–selected , :next-selected , :selected pseudo states.
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 theQTabBar 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.To change the position of the
QTabBar
within aQTabWidget
, use the tab-bar subcontrol (and set subcontrol-position).See Customizing QTabBar for an example.
QTabWidget
.. _qtabwidget-widget:The frame of the tab widget is styled using the ::pane subcontrol. The left and right corners are styled using the ::left-corner and ::right-corner respectively. The position of the tab bar is controlled using the ::tab-bar subcontrol.
By default, the subcontrols have positions of a
QTabWidget
in the QWindowsStyle. To place theQTabBar
in the center, set the subcontrol-position of the tab-bar subcontrol.The :top , :left , :right , :bottom pseudo states depending on the orientation of the tabs.
See Customizing QTabWidget for an example.
QTableView
.. _qtableview-widget:Supports the box model . When
alternating row colors
is enabled, the alternating colors can be styled using the alternate-background-color property.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 aQAbstractButton
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.
QTableWidget
.. _qtablewidget-widget:See QTableView .
QTextEdit
.. _qtextedit-widget:Supports the box model .
The color and background of selected text is styled using selection-color and selection-background-color respectively.
See QAbsractScrollArea to style scrollable backgrounds.
QTimeEdit
.. _qtimeedit-widget:See QSpinBox .
QToolBar
.. _qtoolbar-widget:Supports the box model .
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.
QToolButton
.. _qtoolbutton-widget:Supports the box model .
If the
QToolButton
has a menu, is ::menu-indicator subcontrol can be used to style the indicator. By default, the menu-indicator is positioned at the bottom right of the Padding rectangle of the widget.If the
QToolButton
is inMenuButtonPopup
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, theQToolButton
draws a native border which completely overlaps the background-color. For example,QToolButton { background-color: red; border: none; }See Customizing QToolButton for an example.
QToolBox
.. _qtoolbox-widget:Supports the box model .
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.
QToolTip
.. _qtooltip-widget:Supports the box model . The opacity property controls the opacity of the tooltip.
See Customizing QFrame for an example (a
QToolTip
is aQFrame
).
QTreeView
.. _qtreeview-widget:Supports the box model . When
alternating row colors
is enabled, the alternating colors can be styled using the alternate-background-color property.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 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.
QTreeWidget
.. _qtreewidget-widget:See QTreeView .
QWidget
.. _qwidget-widget:Supports only the background , background-clip and background-origin properties.
If you subclass from
QWidget
, you need to provide a paintEvent for your customQWidget
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.
List of Properties¶
The table below lists all the properties supported by Qt Style Sheets. Which values can be given to an property depend on the property’s type . Unless otherwise specified, properties below apply to all widgets. Properties marked with an asterisk * are specific to Qt and have no equivalent in CSS2 or CSS3.
``image`` * .. _image-prop:
Url +
The image that is drawn in the contents rectangle of a subcontrol.
The image property accepts a list of Url s or an
svg
. The actual image that is drawn is determined using the same algorithm asQIcon
(i.e) the image is never scaled up but always scaled down if necessary. If asvg
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) }``image-position`` .. _image-position-prop:
In Qt 4.3 and later, the alignment of the image image’s position can be specified using relative or absolute position.
``left`` .. _left-prop:
If position is
relative
(the default), moves a subcontrol by a certain offset to the right.If position is
absolute
, theleft
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 }``lineedit-password-character*`` .. _lineedit-password-character-prop:
The
QLineEdit
password character as a Unicode number.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 }``lineedit-password-mask-delay*`` .. _lineedit-password-mask-delay-prop:
The
QLineEdit
password mask delay in milliseconds before lineedit-password-character is applied to visible character.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 }``margin`` .. _margin-prop:
The widget’s margins. Equivalent to specifying
margin-top
,margin-right
,margin-bottom
, andmargin-left
.This property is supported by
QAbstractItemView
subclasses,QAbstractSpinBox
subclasses,QCheckBox
,QComboBox
,QFrame
,QGroupBox
,QLabel
,QLineEdit
,QMenu
,QMenuBar
,QPushButton
,QRadioButton
,QSplitter
,QTextEdit
, andQToolTip
.If this property is not specified, it defaults to
0
.Example:
QLineEdit { margin: 2px }See also padding , spacing , and The Box Model .
margin-top
The widget’s top margin.
margin-right
The widget’s right margin.
margin-bottom
The widget’s bottom margin.
margin-left
The widget’s left margin.
``max-height`` .. _max-height-prop:
The widget’s or a subcontrol’s maximum height.
This property is supported by
QAbstractItemView
subclasses,QAbstractSpinBox
subclasses,QCheckBox
,QComboBox
,QFrame
,QGroupBox
,QLabel
,QLineEdit
,QMenu
,QMenuBar
,QPushButton
,QRadioButton
,QSizeGrip
,QSpinBox
,QSplitter
,QStatusBar
,QTextEdit
, andQToolTip
.The value is relative to the contents rect in the box model .
Example:
QSpinBox { max-height: 24px }See also max-width .
``max-width`` .. _max-width-prop:
The widget’s or a subcontrol’s maximum 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
, andQToolTip
.The value is relative to the contents rect in the box model .
Example:
QComboBox { max-width: 72px }See also max-height .
``messagebox-text-interaction-flags*`` .. _messagebox-text-interaction-flags-prop:
The interaction behavior for text in a message box. Possible values are based on
TextInteractionFlags
.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 }``min-height`` .. _min-height-prop:
The widget’s or a subcontrol’s minimum height.
This property is supported by
QAbstractItemView
subclasses,QAbstractSpinBox
subclasses,QCheckBox
,QComboBox
,QFrame
,QGroupBox
,QLabel
,QLineEdit
,QMenu
,QMenuBar
,QPushButton
,QRadioButton
,QSizeGrip
,QSpinBox
,QSplitter
,QStatusBar
,QTextEdit
,QToolButton
, andQToolTip
.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 }Note
Setting this property might allow widgets to shrink smaller than the space required for the contents.
See also min-width .
``min-width`` .. _min-width-prop:
The widget’s or a subcontrol’s minimum 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
,QToolButton
, andQToolTip
.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 }Note
Setting this property might allow widgets to shrink smaller than the space required for the contents.
See also min-height .
``opacity*`` .. _opacity-prop:
The opacity for a widget. Possible values are from 0 (transparent) to 255 (opaque). For the moment, this is only supported for
tooltips
.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 }outline
The outline drawn around the object’s border.
outline-color
The color of the outline. See also border-color
outline-offset
The outline’s offset from the border of the widget.
outline-style
Specifies the pattern used to draw the outline. See also border-style
outline-radius
Adds rounded corners to the outline
outline-bottom-left-radius
The radius for the bottom-left rounded corner of the outline.
outline-bottom-right-radius
The radius for the bottom-right rounded corner of the outline.
outline-top-left-radius
The radius for the top-left corner of the outline.
outline-top-right-radius
The radius for the top-right rounded corner of the outline.
``padding`` .. _padding-prop:
The widget’s padding. Equivalent to specifying
padding-top
,padding-right
,padding-bottom
, andpadding-left
.This property is supported by
QAbstractItemView
subclasses,QAbstractSpinBox
subclasses,QCheckBox
,QComboBox
,QFrame
,QGroupBox
,QLabel
,QLineEdit
,QMenu
,QMenuBar
,QPushButton
,QRadioButton
,QSplitter
,QTextEdit
, andQToolTip
.If this property is not specified, it defaults to
0
.Example:
QLineEdit { padding: 3px }See also margin , spacing , and The Box Model .
padding-top
The widget’s top padding.
padding-right
The widget’s right padding.
padding-bottom
The widget’s bottom padding.
padding-left
The widget’s left padding.
``paint-alternating-row-colors-for-empty-area`` .. _paint-alternating-row-colors-for-empty-area-prop:
bool
Whether the
QTreeView
paints alternating row colors for the empty area (i.e the area where there are no items)``position`` .. _position-prop:
relative
|absolute
Whether offsets specified using left , right , top , and bottom are relative or absolute coordinates.
If this property is not specified, it defaults to
relative
.``right`` .. _right-prop:
If position is
relative
(the default), moves a subcontrol by a certain offset to the left; specifyingright:*x*
is then equivalent to specifying `` left : -*x*`` .If position is
absolute
, theright
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 }``selection-background-color*`` .. _selection-background-color-prop:
The background of selected text or items.
This property is supported by all widgets that respect the
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 .
``selection-color*`` .. _selection-color-prop:
The foreground of selected text or items.
This property is supported by all widgets that respect the
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 .
``show-decoration-selected*`` .. _show-decoration-selected-prop:
Controls whether selections in a
QListView
cover the entire row or just the extent of the text.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 }``spacing*`` .. _spacing-prop:
Internal spacing in the widget.
``subcontrol-origin*`` .. _subcontrol-origin-prop:
The origin rectangle of the subcontrol within the parent element.
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 .
``subcontrol-position*`` .. _subcontrol-position-prop:
The alignment of the subcontrol within the origin rectangle specified by subcontrol-origin .
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 .
``titlebar-show-tooltips-on-buttons`` } .. _titlebar-show-tooltips-on-buttons-prop:
bool
Whether tool tips are shown on window title bar buttons.
``widget-animation-duration*`` .. _widget-animation-duration:
How much an animation should last (in milliseconds). A value equal to zero means that the animations will be disabled.
If this property is not specified, it defaults to the value specified by the current style for the
SH_Widget_Animation_Duration
style hint.This property was added in Qt 5.10.
Example:
* { widget-animation-duration: 100 }``text-align`` .. _text-align-prop:
The alignment of text and icon within the contents of the widget.
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
andQProgressBar
.``text-decoration``
none
underline
overline
line-through
Additional text effects
``top`` .. _top-prop:
If position is
relative
(the default), moves a subcontrol by a certain offset down.If position is
absolute
, thetop
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 }``width`` .. _width-prop:
The width of a subcontrol (or a widget in some cases).
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 .
-qt-background-role
The
background-color
for the subcontrol or widget based on the chosen role.-qt-style-features
list
The list of CSS properties that you want to apply Qt-specific styles on.
Note
The
list
can only include properties that are not pixmap-based.
List of Icons¶
Icons used in Qt can be customized using the following properties. Each of the properties listed in this section have the type Icon .
Note that for icons to appear in buttons in a
QDialogButtonBox
, you need to set the dialogbuttonbox-buttons-have-icons property to true. Also, to customize the size of the icons, use the icon-size property.
Name
StandardPixmap
backward-icon
SP_ArrowBack
cd-icon
SP_DriveCDIcon
computer-icon
SP_ComputerIcon
desktop-icon
SP_DesktopIcon
dialog-apply-icon
SP_DialogApplyButton
dialog-cancel-icon
SP_DialogCancelButton
dialog-close-icon
SP_DialogCloseButton
dialog-discard-icon
SP_DialogDiscardButton
dialog-help-icon
SP_DialogHelpButton
dialog-no-icon
SP_DialogNoButton
dialog-ok-icon
SP_DialogOkButton
dialog-open-icon
SP_DialogOpenButton
dialog-reset-icon
SP_DialogResetButton
dialog-save-icon
SP_DialogSaveButton
dialog-yes-icon
SP_DialogYesButton
directory-closed-icon
SP_DirClosedIcon
directory-icon
SP_DirIcon
directory-link-icon
SP_DirLinkIcon
directory-open-icon
SP_DirOpenIcon
dockwidget-close-icon
SP_DockWidgetCloseButton
downarrow-icon
SP_ArrowDown
dvd-icon
SP_DriveDVDIcon
file-icon
SP_FileIcon
file-link-icon
SP_FileLinkIcon
filedialog-contentsview-icon
SP_FileDialogContentsView
filedialog-detailedview-icon
SP_FileDialogDetailedView
filedialog-end-icon
SP_FileDialogEnd
filedialog-infoview-icon
SP_FileDialogInfoView
filedialog-listview-icon
SP_FileDialogListView
filedialog-new-directory-icon
SP_FileDialogNewFolder
filedialog-parent-directory-icon
SP_FileDialogToParent
filedialog-start-icon
SP_FileDialogStart
floppy-icon
SP_DriveFDIcon
forward-icon
SP_ArrowForward
harddisk-icon
SP_DriveHDIcon
home-icon
SP_DirHomeIcon
leftarrow-icon
SP_ArrowLeft
messagebox-critical-icon
SP_MessageBoxCritical
messagebox-information-icon
SP_MessageBoxInformation
messagebox-question-icon
SP_MessageBoxQuestion
messagebox-warning-icon
SP_MessageBoxWarning
network-icon
SP_DriveNetIcon
rightarrow-icon
SP_ArrowRight
titlebar-contexthelp-icon
SP_TitleBarContextHelpButton
titlebar-maximize-icon
SP_TitleBarMaxButton
titlebar-menu-icon
SP_TitleBarMenuButton
titlebar-minimize-icon
SP_TitleBarMinButton
titlebar-normal-icon
SP_TitleBarNormalButton
titlebar-shade-icon
SP_TitleBarShadeButton
titlebar-unshade-icon
SP_TitleBarUnshadeButton
trash-icon
SP_TrashIcon
uparrow-icon
SP_ArrowUp
List of Property Types¶
The following table summarizes the syntax and meaning of the different property types.
Url .. _url:
url(*filename*)
*filename*
is the name of a file on the local disk or stored using The Qt Resource System . Setting an image implicitly sets the width and height of the element.
List of Pseudo-States¶
The following pseudo-states are supported:
Pseudo-State
Description
:active
.. _active:This state is set when the widget resides in an active window.
:adjoins-item
.. _adjoins-item-ps:This state is set when the ::branch of a
QTreeView
is adjacent to an item.
:alternate
.. _alternate-ps:This state is set for every alternate row whe painting the row of a
QAbstractItemView
whenalternatingRowColors()
is set to true.
:bottom
.. _bottom-ps:The item is positioned at the bottom. For example, a
QTabBar
that has its tabs positioned at the bottom.
:checked
.. _checked-ps:The item is checked. For example, the
checked
state ofQAbstractButton
.
:closable
.. _closable-ps:The items can be closed. For example, the
QDockWidget
has theDockWidgetClosable
feature turned on.
:closed
.. _closed-ps:The item is in the closed state. For example, an non-expanded item in a
QTreeView
:default
.. _default-ps:The item is the default. For example, a
default
QPushButton
or a default action in aQMenu
.
:disabled
.. _disabled-ps:The item is
disabled
.
:editable
.. _editable-ps:The
QComboBox
is editable.
:edit-focus
.. _edit-focus-ps:The item has edit focus (See
State_HasEditFocus
). This state is available only for Qt Extended applications.
:enabled
.. _enabled-ps:The item is
enabled
.
:exclusive
.. _exclusive-ps:The item is part of an exclusive item group. For example, a menu item in a exclusive
QActionGroup
.
:first
.. _first-ps:The item is the first (in a list). For example, the first tab in a
QTabBar
.
:flat
.. _flat-ps:The item is flat. For example, a
flat
QPushButton
.
:floatable
.. _floatable-ps:The items can be floated. For example, the
QDockWidget
has theDockWidgetFloatable
feature turned on.
:focus
.. _focus-ps:The item has
input focus
.
:has-children
.. _has-children-ps:The item has children. For example, an item in a
QTreeView
that has child items.
:has-siblings
.. _has-siblings-ps:The item has siblings. For example, an item in a
QTreeView
that siblings.
:horizontal
.. _horizontal-ps:The item has horizontal orientation
:hover
.. _hover-ps:The mouse is hovering over the item.
:indeterminate
.. _indeterminate-ps:The item has indeterminate state. For example, a
QCheckBox
orQRadioButton
ispartially checked
.
:last
.. _last-ps:The item is the last (in a list). For example, the last tab in a
QTabBar
.
:left
.. _left-ps:The item is positioned at the left. For example, a
QTabBar
that has its tabs positioned at the left.
:maximized
.. _maximized-ps:The item is maximized. For example, a maximized
QMdiSubWindow
.
:middle
.. _middle-ps:The item is in the middle (in a list). For example, a tab that is not in the beginning or the end in a
QTabBar
.
:minimized
.. _minimized-ps:The item is minimized. For example, a minimized
QMdiSubWindow
.
:movable
.. _movable-ps:The item can be moved around. For example, the
QDockWidget
has theDockWidgetMovable
feature turned on.
:no-frame
.. _no-frame-ps:The item has no frame. For example, a frameless
QSpinBox
orQLineEdit
.
:non-exclusive
.. _non-exclusive-ps:The item is part of a non-exclusive item group. For example, a menu item in a non-exclusive
QActionGroup
.
:off
.. _off-ps:For items that can be toggled, this applies to items in the “off” state.
:on
.. _on-ps:For items that can be toggled, this applies to widgets in the “on” state.
:only-one
.. _only-one-ps:The item is the only one (in a list). For example, a lone tab in a
QTabBar
.
:open
.. _open-ps:The item is in the open state. For example, an expanded item in a
QTreeView
, or aQComboBox
orQPushButton
with an open menu.
:next-selected
.. _next-selected-ps:The next item (in a list) is selected. For example, the selected tab of a
QTabBar
is next to this item.
:pressed
.. _pressed-ps:The item is being pressed using the mouse.
:previous-selected
.. _previous-selected-ps:The previous item (in a list) is selected. For example, a tab in a
QTabBar
that is next to the selected tab.
:read-only
.. _read-only-ps:The item is marked read only or non-editable. For example, a read only
QLineEdit
or a non-editableQComboBox
.
:right
.. _right-ps:The item is positioned at the right. For example, a
QTabBar
that has its tabs positioned at the right.
:selected
.. _selected-ps:The item is selected. For example, the selected tab in a
QTabBar
or the selected item in aQMenu
.
:top
.. _top-ps:The item is positioned at the top. For example, a
QTabBar
that has its tabs positioned at the top.
:unchecked
.. _unchecked-ps:The item is
unchecked
.
:vertical
.. _vertical-ps:The item has vertical orientation.
:window
.. _window-ps:The widget is a window (i.e top level widget)
List of Sub-Controls¶
The following subcontrols are available:
Sub-Control
Description
::add-line
.. _add-line-sub:The button to add a line of a
QScrollBar
.
::add-page
.. _add-page-sub:The region between the handle (slider) and the add-line of a
QScrollBar
.
::branch
.. _branch-sub:The branch indicator of a
QTreeView
.
::chunk
.. _chunk-sub:The progress chunk of a
QProgressBar
.
::close-button
.. _close-button-sub:The close button of a
QDockWidget
or tabs ofQTabBar
::corner
.. _corner-sub:The corner between two scrollbars in a
QAbstractScrollArea
::down-arrow
.. _down-arrow-sub:The down arrow of a
QComboBox
,QHeaderView
(sort indicator),QScrollBar
orQSpinBox
.
::down-button
.. _down-button-sub:The down button of a
QScrollBar
or aQSpinBox
.
::drop-down
.. _drop-down-sub:The drop-down button of a
QComboBox
.
::float-button
.. _float-button-sub:The float button of a
QDockWidget
::groove
.. _groove-sub:The groove of a
QSlider
.
::indicator
.. _indicator-sub:The indicator of a
QAbstractItemView
, aQCheckBox
, aQRadioButton
, a checkableQMenu
item or a checkableQGroupBox
.
::handle
.. _handle-sub:The handle (slider) of a
QScrollBar
, aQSplitter
, or aQSlider
.
::icon
.. _icon-sub:The icon of a
QAbstractItemView
or aQMenu
.
::item
.. _item-sub:An item of a
QAbstractItemView
, aQMenuBar
, aQMenu
, or aQStatusBar
.
::left-arrow
.. _left-arrow-sub:The left arrow of a
QScrollBar
.
::left-corner
.. _left-corner-sub:The left corner of a
QTabWidget
. For example, this control can be used to control position the left corner widget in aQTabWidget
.
::menu-arrow
.. _menu-arrow-sub:The arrow of a
QToolButton
with a menu.
::menu-button
.. _menu-button-sub:The menu button of a
QToolButton
.
::menu-indicator
.. _menu-indicator-sub:The menu indicator of a
QPushButton
.
::right-arrow
.. _right-arrow-sub:The right arrow of a
QMenu
or aQScrollBar
.
::pane
.. _pane-sub:The pane (frame) of a
QTabWidget
.
::right-corner
.. _right-corner-sub:The right corner of a
QTabWidget
. For example, this control can be used to control the position the right corner widget in aQTabWidget
.
::scroller
.. _scroller-sub:The scroller of a
QMenu
orQTabBar
.
::section
.. _section-sub:The section of a
QHeaderView
.
::separator
.. _separator-sub:The separator of a
QMenu
or in aQMainWindow
.
::sub-line
.. _sub-line-sub:The button to subtract a line of a
QScrollBar
.
::sub-page
.. _sub-page-sub:The region between the handle (slider) and the sub-line of a
QScrollBar
.
::tab
.. _tab-sub:The tab of a
QTabBar
orQToolBox
.
::tab-bar
.. _tab-bar-sub:The tab bar of a
QTabWidget
. This subcontrol exists only to control the position of theQTabBar
inside theQTabWidget
. To style the tabs using the ::tab subcontrol.
::tear
.. _tear-sub:The tear indicator of a
QTabBar
.
::tearoff
.. _tearoff-sub:The tear-off indicator of a
QMenu
.
::text
.. _text-ps:The text of a
QAbstractItemView
.
::title
.. _title-sub:The title of a
QGroupBox
or aQDockWidget
.
::up-arrow
.. _up-arrow-sub:The up arrow of a
QHeaderView
(sort indicator),QScrollBar
or aQSpinBox
.
::up-button
.. _up-button-sub:The up button of a
QSpinBox
.See Customizing the QPushButton’s Menu Indicator Sub-Control for an example of how to customize a subcontrol.
© 2022 The Qt Company Ltd. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.