Home

转载：Qt Style Sheets

# Introduction to the Qt Style Sheets

Qt Style Sheets or QSS is very much similar to Cascading Style Sheets (CSS) for the web. However, QSS supports only a limited number of rules in comparison with CSS. For example, QSS supports the box model but doesn’t support the flexbox and grid layouts.

To set the style sheets for a widget, you call its setStyleSheet() method with a style sheet string. To demonstrate QSS, we’ll turn the following login window:

…into the following login window:

The following program creates a login window that appears in the first picture without any style sheets.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import sys
from PyQt6.QtWidgets import QApplication,  QWidget, QLabel, QLineEdit, QPushButton,  QVBoxLayout
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QIcon


class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setWindowTitle('Login')
        self.setWindowIcon(QIcon('./assets/lock.png'))

        layout = QVBoxLayout()
        self.setLayout(layout)

        heading = QLabel(
            'Welcome Back',
            alignment=Qt.AlignmentFlag.AlignHCenter
        )
        heading.setObjectName('heading')

        subheading = QLabel(
            'Please enter your email and password to log in.',
            alignment=Qt.AlignmentFlag.AlignHCenter
        )
        subheading.setObjectName('subheading')

        self.email = QLineEdit(self)
        self.email.setPlaceholderText('Enter your email')

        self.password = QLineEdit(self)
        self.password.setEchoMode(QLineEdit.EchoMode.Password)
        self.password.setPlaceholderText('Enter your password')

        self.btn_login = QPushButton('Login')

        layout.addStretch()
        layout.addWidget(heading)
        layout.addWidget(subheading)
        layout.addWidget(QLabel('Email:'))
        layout.addWidget(self.email)
        layout.addWidget(QLabel('Password:'))
        layout.addWidget(self.password)
        layout.addWidget(self.btn_login)
        layout.addStretch()

        self.show()


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    sys.exit(app.exec())

First, make the background of the QWidget white:

1
2
3
QWidget {
  background-color: #fff;
}

Second, change the color and font weight of the QLabel :

1
2
3
4
QLabel {
  color: #464d55;
  font-weight: 600;
}

Third, change the color, font size, and margin-bottom of the QLabel with the object name heading:

1
2
3
4
5
QLabel#heading {
  color: #0f1925;
  font-size: 18px;
  margin-bottom: 10px;
}

Fourth, change the color, font size, font weight, and margin-bottom of the QLabel with the object name subheading:

1
2
3
4
5
6
QLabel#subheading {
  color: #0f1925;
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 10px;
}

Fifth, change the border-radius, border style, and padding of the QLineEdit widget:

1
2
3
4
5
QLineEdit {
  border-radius: 8px;
  border: 1px solid #e0e4e7;
  padding: 5px 15px;
}

Sixth, highlight the border of the QLineEdit when it has the focus:

1
2
3
QLineEdit:focus {
  border: 1px solid #d0e3ff;
}

Seventh, change the color of the placeholder:

1
2
3
QLineEdit::placeholder {
  color: #767e89;
}

Eighth, make the QPushButton rounded and blue with the text color white:

1
2
3
4
5
6
7
8
9
10
QPushButton {
  background-color: #0d6efd;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #0d6efd;
  padding: 5px 15px;
  margin-top: 10px;
  outline: 0px;
}

Ninth, change the border of the QPushButton when it is hover or focus:

1
2
3
4
5
QPushButton:hover,
QPushButton:focus {
  background-color: #0b5ed7;
  border: 3px solid #9ac3fe;
}

Tenth, place all the rules of the QSS in a file like login.qss :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
QWidget {
  background-color: #fff;
}
QLabel {
  color: #464d55;
  font-weight: 600;
}
QLabel#heading {
  color: #0f1925;
  font-size: 18px;
  margin-bottom: 10px;
}

QLabel#subheading {
  color: #0f1925;
  font-size: 12px;
  font-weight: normal;
  margin-bottom: 10px;
}
QLineEdit {
  border-radius: 8px;
  border: 1px solid #e0e4e7;
  padding: 5px 15px;
}

QLineEdit:focus {
  border: 1px solid #d0e3ff;
}

QLineEdit::placeholder {
  color: #767e89;
}
QPushButton {
  background-color: #0d6efd;
  color: #fff;
  font-weight: 600;
  border-radius: 8px;
  border: 1px solid #0d6efd;
  padding: 5px 15px;
  margin-top: 10px;
  outline: 0px;
}
QPushButton:hover,
QPushButton:focus {
  background-color: #0b5ed7;
  border: 3px solid #9ac3fe;
}

Finally, read QSS from the login.qss file and pass the contents to the setStyleSheet() method of the QApplication method:

1
app.setStyleSheet(Path('login.qss').read_text())

Here’s the complete program:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import sys
from pathlib import Path
from PyQt6.QtWidgets import QApplication,  QWidget, QLabel, QLineEdit, QPushButton,  QVBoxLayout
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QIcon


class MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.setWindowTitle('Login')
        self.setWindowIcon(QIcon('./assets/lock.png'))

        layout = QVBoxLayout()
        self.setLayout(layout)

        heading = QLabel(
            'Welcome Back',
            alignment=Qt.AlignmentFlag.AlignHCenter
        )
        heading.setObjectName('heading')

        subheading = QLabel(
            'Please enter your email and password to log in.',
            alignment=Qt.AlignmentFlag.AlignHCenter
        )
        subheading.setObjectName('subheading')

        self.email = QLineEdit(self)
        self.email.setPlaceholderText('Enter your email')

        self.password = QLineEdit(self)
        self.password.setEchoMode(QLineEdit.EchoMode.Password)
        self.password.setPlaceholderText('Enter your password')

        self.btn_login = QPushButton('Login')

        layout.addStretch()
        layout.addWidget(heading)
        layout.addWidget(subheading)
        layout.addWidget(QLabel('Email:'))
        layout.addWidget(self.email)
        layout.addWidget(QLabel('Password:'))
        layout.addWidget(self.password)
        layout.addWidget(self.btn_login)
        layout.addStretch()

        self.show()


if __name__ == '__main__':

    app = QApplication(sys.argv)
    app.setStyleSheet(Path('login.qss').read_text())
    window = MainWindow()
    sys.exit(app.exec())

# Setting Qt Style sheets in Qt Designer

First, right-click the form and select Change StyleSheet … menu:

Second, enter the Qt Style Sheets into the Style Sheet Editor and click the Apply button. Once the QSS is applied, you’ll see its effect in the design:

Third, close the style sheet editor and preview the form (Ctrl-R):

# Summary

  • Use Qt Style Sheets (QSS) to customize the widgets.
  • Use the setStyleSheet() method of the widgets to set style sheets for a widget.
Edited on