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.
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.
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.
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.
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.
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 the ::indicator subcontrol. The spacing property can be used to control the spacing between the text and indicator.
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.
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.
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, the QPushButton draws a native border which completely overlaps the background-color. For example,
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.
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 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.
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.
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.
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).
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 the QTabBar 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.
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.
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 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.
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,
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.
Shorthand notation for setting the background. Equivalent to specifying background-color, background-image, background-repeat, and/or background-position.
Determines whether the background-image in a QAbstractScrollArea is scrolled or fixed with respect to the viewport. By default, the background-image scrolls with the viewport.
Shorthand notation for setting the widget's bottom border. Equivalent to specifying border-bottom-color, border-bottom-style, and/or border-bottom-width.
The radius of the border's corners. Equivalent to specifying border-top-left-radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius.
If position is relative (the default), moves a subcontrol by a certain offset up; specifying bottom: y is then equivalent to specifying top: -y.
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).
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.
The height of a subcontrol (or in some case, a widget).
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.
The image that is drawn in the contents rectangle of a subcontrol.
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 relative (the default), moves a subcontrol by a certain offset to the left; specifying right: x is then equivalent to specifying left: -x.
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).
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.
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.
A border image is an image that is composed of nine parts (top left, top center, top right, center left, center, center right, bottom left, bottom center, and bottom right). When a border of a certain size is required, the corner parts are used as is, and the top, right, bottom, and left parts are stretched or repeated to produce a border with the desired size.
One to four occurrences of Brush, specifying the top, right, bottom, and left edges of a box, respectively. If the left color is not specified, it is taken to be the same as the right color. If the bottom color is not specified, it is taken to be the same as the top color. If the right color is not specified, it is taken to be the same as the top color.
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 */
One to four occurrences of Length, specifying the top, right, bottom, and left edges of a box, respectively. If the left length is not specified, it is taken to be the same as the right length. If the bottom length is not specified, is it taken to be the same as the top length. If the right length is not specified, it is taken to be the same as the top length.
Specifies a Color or a Gradient or an entry in the Palette.
Color
rgb(r, g, b) | rgba(r, g, b, a) | hsv(h, s, v) | hsva(h, s, v, a) | #rrggbb | Color Name
Specifies a color as RGB (red, green, blue) or RGBA (red, green, blue, alpha) or HSV (hue, saturation, value) or HSVA (hue, saturation, value, alpha) or a named color. The rgb() or rgba() syntax can be used with integer values between 0 and 255, or with percentages. The value of s, v, and a in hsv() or hsva() must all be in the range 0-255; the value of h must be in the range 0-359.
Specifies gradient fills. There are three types of gradient fills:
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)
}
Icon
(Url (disabled | active | normal | selected)? (on | off)? )*
A number followed by a measurement unit. The CSS standard recommends that user agents must ignore a declaration with an illegal value. In Qt, it is mandatory to specify measurement units. For compatibility with earlier versions of Qt, numbers without measurement units are treated as pixels in most contexts. The supported units are:
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')
Number
A decimal integer or a real number
Examples: 0, 18, +127, -255, 12.34, -.5, 0009.
Origin
margin | border | padding | content
Indicates which of four rectangles to use.
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.
One or two occurrences of Length. If only one length is specified, it is used as the radius of the quarter circle defining the corner. If two lengths are specified, the first length is the horizontal radius of a quarter ellipse, whereas the second length is the vertical radius.
Repeat
repeat-x | repeat-y | repeat | no-repeat
A value indicating the nature of repetition.
repeat-x: Repeat horizontally.
repeat-y: Repeat vertically.
repeat: Repeat horizontally and vertically.
no-repeat: Don't repeat.
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
This state is set when the widget resides in an active window.
:adjoins-item
This state is set when the ::branch of a QTreeView is adjacent to an item.
The tab bar of a QTabWidget. This subcontrol exists only to control the position of the QTabBar inside the QTabWidget. To style the tabs using the ::tab subcontrol.
Qt Quarterly est la revue trimestrielle proposée par Nokia et à destination des développeurs Qt. Ces articles d'une grande qualité technique sont rédigés par des experts Qt. Lire l'article.
Vous souhaitez rejoindre la rédaction ou proposer un tutoriel, une traduction, une question... ? Postez dans le forum Contribuez ou contactez-nous par MP ou par email (voir en bas de page).
Qt dans le magazine
Cette page est une traduction d'une page de la documentation de Qt, écrite par Nokia Corporation and/or its subsidiary(-ies). Les éventuels problèmes résultant d'une mauvaise traduction ne sont pas imputables à Nokia.
Vous avez déniché une erreur ? Un bug ? Une redirection cassée ? Ou tout autre problème, quel qu'il soit ? Ou bien vous désirez participer à ce projet de traduction ? N'hésitez pas à nous contacter
ou par MP !
