pythonpyqtpyqt5qtstylesheetsqcombobox

How can I change the white color in QComboBox?


I would like to change the color or adjust the size of this rectangle behind the open Combobox

I noticed that there is a problem with the increased size of this white background and the offset options compared to when this qss is not used Closed ComboBox

Closed ComboBox

Open ComboBox

Open ComboBox

Here is a code example that recreates this problem:

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow, QComboBox, QVBoxLayout, QWidget


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.setWindowTitle("QComboBox Demo")
        self.setGeometry(100, 100, 300, 200)

        central_widget = QWidget()
        self.setCentralWidget(central_widget)
        layout = QVBoxLayout(central_widget)

        formats = [
            "BMP", "Iris", "PNG", "JPEG", "JPEG 2000", "Targa", "Targa Raw"
        ]

        combo_box = QComboBox()
        combo_box.addItems(formats)
        combo_box.setCurrentIndex(-1)

        layout.addWidget(combo_box)
        layout.addStretch()

        style_sheet = """
        QWidget {
            background-color: #404040;
            color: #e6e6e6;
            margin: 0px;
        }
        QComboBox {
            background-color: #2c2c2c;
            border: 1px solid #404040;
            color: #d0d0d0;
            padding: 4px 6px;
            border-radius: 4px;
            margin: 0px;
        }
        QComboBox:disabled {
            background-color: #323232;
            color: #8a8a8a;
        }
        QComboBox::down-arrow {
            background-color: #2c2c2c;
            image: url('images/QComboBox_down_arrow.png');
        }
        QComboBox::down-arrow:on {
            background-color: #5680c2;
        }
        QComboBox::drop-down {
            background-color: #202020;
            border: none;
            width: 20px;
        }
        QComboBox:on {
            background-color: #5680c2;
            color: #f8f9f9;
        }
        QComboBox QAbstractItemView {
            background-color: #232323;
            border: 1px solid #404040;
            color: #d0d0d0;
            border-radius: 4px;
            margin: 0px;
            padding: 2px;
            min-width: 100px;
            selection-background-color: #5680c2;
        }
        """
        self.setStyleSheet(style_sheet)


if __name__ == "__main__":
    app = QApplication(sys.argv + ['-platform', 'windows:darkmode=1'])
    app.setStyle('Fusion')
    window = MainWindow()
    window.show()
    sys.exit(app.exec_())

Also this partly corrected when I don't use Fusion style, but also some of the necessary style is lost.

The style is based on hannes delbeke stylesheet: https://github.com/hannesdelbeke/blender-qt-stylesheet/blob/main/blender_stylesheet/blender_stylesheet.qss


Solution

  • I got an acceptable working version, using QApplication.setStyleSheet() in the main (I don't know why it works exactly like that...).

    New code:

    import sys
    from PyQt5.QtWidgets import QApplication, QMainWindow, QComboBox, QVBoxLayout, QWidget
    
    
    class MainWindow(QMainWindow):
        def __init__(self):
            super().__init__()
            self.setWindowTitle("QComboBox Demo")
            self.setGeometry(100, 100, 300, 200)
    
            central_widget = QWidget()
            self.setCentralWidget(central_widget)
            layout = QVBoxLayout(central_widget)
    
            formats = [
                "BMP", "Iris", "PNG", "JPEG", "JPEG 2000", "Targa", "Targa Raw"
            ]
    
            combo_box = QComboBox()
            combo_box.addItems(formats)
            combo_box.setCurrentIndex(-1)
    
            layout.addWidget(combo_box)
            layout.addStretch()
    
    
    if __name__ == "__main__":
        style_sheet = """
                        QWidget {
                            background-color: #404040;
                            color: #e6e6e6;
                            margin: 0px;
                        }
                        QComboBox {
                            background-color: #2c2c2c;
                            border: 1px solid #404040;
                            color: #d0d0d0;
                            padding: 4px 6px;
                            border-radius: 4px;
                            margin: 0px;
                        }
                        QComboBox:disabled {
                            background-color: #323232;
                            color: #8a8a8a;
                        }
                        QComboBox::down-arrow {
                            background-color: #2c2c2c;
                            image: url('images/QComboBox_down_arrow.png');
                        }
                        QComboBox::down-arrow:on {
                            background-color: #5680c2;
                        }
                        QComboBox::drop-down {
                            background-color: #202020;
                            border: none;
                            width: 20px;
                        }
                        QComboBox:on {
                            background-color: #5680c2;
                            color: #f8f9f9;
                        }
                        QComboBox QAbstractItemView {
                            background-color: #232323;
                            border: 1px solid #404040;
                            color: #d0d0d0;
                            border-radius: 4px;
                            margin: 0px;
                            padding: 2px;
                            min-width: 100px;
                            selection-background-color: #5680c2;
                        }
                        """
    
        app = QApplication(sys.argv + ['-platform', 'windows:darkmode=1'])
    
        app.setStyleSheet(style_sheet)
    
        app.setStyle('Fusion')
    
        window = MainWindow()
        window.show()
        sys.exit(app.exec_())