如何修改QComboBox下拉框白色背景？解决样式异常问题

我想修改QComboBox展开后下拉面板的颜色或尺寸，但使用当前QSS样式时，下拉面板出现白色背景、尺寸变大且选项偏移的问题，和不使用该QSS时的正常状态不符。

关闭状态的QComboBox：

展开状态的QComboBox：

复现代码 #

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_())

注：不使用Fusion样式时问题部分修正，但会丢失必要样式，该样式基于第三方深色主题样式表修改。

解决方案 #

问题根源在于全局QWidget样式会覆盖下拉面板的默认布局参数，同时Fusion样式下QAbstractItemView的默认样式与自定义QComboBox样式冲突。通过以下调整可修复：

修改后的QSS样式 #

QMainWindow 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: 0;
    padding: 2px;
    min-width: 0;
    selection-background-color: #5680c2;
    outline: none;
    left: 0;
    top: 0;
}

关键修改点 #

1. 缩小全局样式范围：将QWidget选择器改为QMainWindow QWidget，避免影响下拉面板这类独立的子控件布局
2. 修正下拉面板定位：给QComboBox QAbstractItemView添加left: 0; top: 0强制对齐，消除偏移
3. 消除冗余边框：添加outline: none去掉Fusion样式默认的焦点边框，避免额外尺寸
4. 调整最小宽度：将min-width: 100px改为min-width: 0，让下拉面板自适应QComboBox宽度，避免尺寸过大

内容的提问来源于stack exchange，提问作者nekoshaurman