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