Qt Style Sheets Examples

<Unknown command>contentspage{Qt Style Sheets}{Contents}

We will now see a few examples to get started with using Qt Style Sheets.

Style Sheet Usage

 

Customizing the Foreground and Background Colors

Let's start by setting yellow as the background color of all QLineEdits in an application. This could be achieved like this:

 
Sélectionnez
qApp-&gt;setStyleSheet("QLineEdit { background-color: yellow }");

If we want the property to apply only to the QLineEdits that are children (or grandchildren or grand-grandchildren) of a specific dialog, we would rather do this:

 
Sélectionnez
myDialog-&gt;setStyleSheet("QLineEdit { background-color: yellow }");

If we want the property to apply only to one specific QLineEdit, we can give it a name using QObject::setObjectName() and use an ID Selector to refer to it:

 
Sélectionnez
myDialog-&gt;setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

Alternatively, we can set the background-color property directly on the QLineEdit, omitting the selector:

 
Sélectionnez
nameEdit-&gt;setStyleSheet("background-color: yellow");

To ensure a good contrast, we should also specify a suitable color for the text:

 
Sélectionnez
nameEdit-&gt;setStyleSheet("color: blue; background-color: yellow");

It might be a good idea to change the colors used for selected text as well:

 
Sélectionnez
nameEdit-&gt;setStyleSheet("color: blue;"
                        "background-color: yellow;"
                        "selection-color: yellow;"
                        "selection-background-color: blue;");

Customizing Using Dynamic Properties

There are many situations where we need to present a form that has mandatory fields. To indicate to the user that the field is mandatory, one effective (albeit esthetically dubious) solution is to use yellow as the background color for those fields. It turns out this is very easy to implement using Qt Style Sheets. First, we would use the following application-wide style sheet:

 
Sélectionnez
*[mandatoryField="true"] { background-color: yellow }

This means that every widget whose mandatoryField Qt property is set to true would have a yellow background.

Then, for each mandatory field widget, we would simply create a mandatoryField property on the fly and set it to true. For example:

 
Sélectionnez
QLineEdit *nameEdit = new QLineEdit(this);
nameEdit-&gt;setProperty("mandatoryField", true);

QLineEdit *emailEdit = new QLineEdit(this);
emailEdit-&gt;setProperty("mandatoryField", true);

QSpinBox *ageSpinBox = new QSpinBox(this);
ageSpinBox-&gt;setProperty("mandatoryField", true);

Customizing a QPushButton Using the Box Model

This time, we will show how to create a red QPushButton. This QPushButton would presumably be connected to a very destructive piece of code.

First, we are tempted to use this style sheet:

 
Sélectionnez
QPushButton#evilButton { background-color: red }

However, the result is a boring, flat button with no borders:

A flat red button

What happened is this:

  • We have made a request that cannot be satisfied using the native styles alone (e.g., the Windows Vista theme engine doesn't let us specify the background color of a button).

  • Therefore, the button is rendered using style sheets.

  • We haven't specified any values for border-width and border-style, so by default we obtain a 0-pixel wide border of style none.

Let's improve the situation by specifying a border:

 
Sélectionnez
QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-color: beige;
}
A red button with a beige border

Things look already a lot better. But the button looks a bit cramped. Let's specify some spacing between the border and the text using the padding. Additionally, we will enforce a minimum width, round the corners, and specify a larger font to make the button look nicer:

 
Sélectionnez
QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}
A red button with a round beige border and big, bold text

The only issue remaining is that the button doesn't react when we press it. We can fix this by specifying a slightly different background color and use a different border style.

 
Sélectionnez
QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-radius: 10px;
    border-color: beige;
    font: bold 14px;
    min-width: 10em;
    padding: 6px;
}
QPushButton#evilButton:pressed {
    background-color: rgb(224, 0, 0);
    border-style: inset;
}