Qt uses QSS to set control styles

Qt uses QSS to set control styles

In this article, we will learn how to use QSS (Qt Style Sheet) to customize the styles of QPushButton, QLabel, QLineEdit and QComboBox controls. In Qt, we can use QSS to customize the appearance of controls and easily integrate them into our applications.

Set the style of QPushButton

We can style the QPushButton in the following ways:

QPushButton {
    
    
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #3b78e6, stop:1 #0f5fd7);
    border-radius: 5px;
    color: white;
    font-weight: bold;
    padding: 5px 15px;
}

QPushButton:hover {
    
    
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #60a3f7, stop:1 #3b78e6);
}

QPushButton:pressed {
    
    
    background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #0f5fd7, stop:1 #3b78e6);
}

Here, we set the background of the QPushButton control to a color gradient and use the border-radius property to add a rounded border. We also changed the font boldness and color, and set the padding attribute for the button. At the same time, we also modify the gradient background color of the button in the :hover and :pressed states respectively.

Set the style of QLabel

Similar to how the QPushButton is set up, we can use the following code to style the QLabel:

QLabel {
    
    
    background-color: #d8e5f4;
    border: 1px solid #c7d9ea;
    color: #333333;
    padding: 2px;
}

For the QLabel control, we set its background to a fixed color, added a thin gray border to the border, and set appropriate padding for the text.

Set the style of QLineEdit

We can use the following code to style the QLineEdit:

QLineEdit {
    
    
    background-color: #ffffff;
    border: 1px solid #c7d9ea;
    color: #444444;
    padding: 2px;
}

QLineEdit:focus {
    
    
    border: 1px solid #3b79e6;
    outline: none;
}

Here, we set the background color and border color of the QLineEdit control to make it look cleaner. For the focus case, we added a border line highlighted in blue and disabled the default appearance font style application.

Set the style of QComboBox

Finally, we use the following code to style the QComboBox:

QComboBox {
    
    
    background-color: #ffffff;
    border: 1px solid #c7d9ea;
    color: #444444;
    padding: 2px;    
}

QComboBox:editable {
    
    
    background-color: #ffffff;
}

QComboBox QAbstractItemView {
    
    
    border: 1px solid #c7d9ea;
    selection-background-color: #3b78e6;
    selection-color: white;
}

Here we set the QComboBox control's background and border colors, as well as its text color and add appropriate padding. For the editable QComboBox, we also set the background color separately. Finally, we modify the border lines of the item view in the QComboBox and provide a more obvious text and gradient background color for the selected item.

In this article, we learned how to use QSS to customize the appearance of QPushButton, QLabel, QLineEdit, and QComboBox controls. Qt provides a lot of properties that can help us change the appearance of controls and allow us to create applications with customized appearances.