Qt Style Sheets Examples

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

qApp->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:

myDialog->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:

myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");

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

nameEdit->setStyleSheet("background-color: yellow");

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

nameEdit->setStyleSheet("color: blue; background-color: yellow");

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

nameEdit->setStyleSheet("color: blue;"
                        "background-color: yellow;"
                        "selection-color: yellow;"
                        "selection-background-color: blue;");

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:

*[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:

QLineEdit *nameEdit = new QLineEdit(this);
nameEdit->setProperty("mandatoryField", true);

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

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

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:

QPushButton#evilButton { background-color: red }

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

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:

QPushButton#evilButton {
    background-color: red;
    border-style: outset;
    border-width: 2px;
    border-color: beige;
}

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:

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

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.

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