I have a qtcombobox. I'm attempting to add some styling using a qss stylesheet and it's not rendering properly. The white background you see below is unwanted.
Picture:
My code to style it:
QWidget
{
color: #eff0f1;
background-color: #31363b;
selection-background-color:#3daee9;
selection-color: #eff0f1;
background-clip: border;
border-image: none;
border: 0px transparent black;
outline: 0;
}
QComboBox
{
selection-background-color: #3daee9;
border-style: solid;
border: 1px solid #76797C;
border-radius: 2px;
padding: 5px;
min-width: 75px;
}
QComboBox:hover,QPushButton:hover,QAbstractSpinBox:hover,QLineEdit:hover,QTextEdit:hover,QPlainTextEdit:hover,QAbstractView:hover,QTreeView:hover
{
border: 1px solid #3daee9;
color: #eff0f1;
}
QComboBox:on
{
padding-top: 3px;
padding-left: 4px;
selection-background-color: #4a4a4a;
}
QComboBox QAbstractItemView
{
background-color: #232629;
border-radius: 2px;
border: 1px solid #76797C;
selection-background-color: #3daee9;
}
QComboBox::drop-down
{
subcontrol-origin: padding;
subcontrol-position: top right;
width: 15px;
border-left-width: 0px;
border-left-color: darkgray;
border-left-style: solid;
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
QComboBox::down-arrow
{
image: url(:/qss_icons/rc/down_arrow_disabled.png);
}
QComboBox::down-arrow:on, QComboBox::down-arrow:hover,
QComboBox::down-arrow:focus
{
image: url(:/qss_icons/rc/down_arrow.png);
}
What can cause the inner most portion to remain white? For what it's worth, the dropdown menu is styling properly. Not sure what's messing with it to make part of the bg white.
Edit: So I've created a little test case with this stylesheet and the bare minimum and the qcombobox works there. There's a lot of code that touches this qcombobox so something else is probably messing with it but I wouldn't know where to start or how narrow it down. Any hints/ suggestions are greatly appreciated. I've tried commenting out other setstylesheet commands and obvious basics like that.
For some reason, stylesheet rules do not seem to cascade to line-edits in a combo-box. The only solution seems to be to apply the stylesheet directly:
self.combo.lineEdit().setStylesheet('background-color: red')
That may not work with all widget-styles, though (for example, it doesn't seem to work with the "Windows" style).
EDIT:
Here is what I used for testing:
from PySide import QtCore, QtGui
class Window(QtGui.QWidget):
def __init__(self):
super(Window, self).__init__()
self.button = QtGui.QPushButton('Test', self)
self.button.clicked.connect(self.handleButton)
self.combo = QtGui.QComboBox(self)
self.combo.setEditable(True)
self.edit = QtGui.QLineEdit(self)
layout = QtGui.QVBoxLayout(self)
layout.addWidget(self.button)
layout.addWidget(self.edit)
layout.addWidget(self.combo)
self.setStyleSheet("""
QWidget
{
background-color: yellow;
}
QComboBox
{
background-color: blue;
}
QLineEdit
{
background-color: red;
}
""")
def handleButton(self):
self.combo.lineEdit().setStyleSheet(self.styleSheet())
if __name__ == '__main__':
import sys
app = QtGui.QApplication(sys.argv)
window = Window()
window.setGeometry(600, 200, 300, 100)
window.show()
sys.exit(app.exec_())
And here are the results I get on Linux:
Clicking the "Test" button does set the background of the combo line-edit. I also tried some other selectors like QComboBox > QLineEdit
, QLineEdit#foobar
, etc - but none of them have any effect.