2

Version/Environment:

  • Windows 10 64 bit
  • Qt 5.11.0 MSVC2017 64 bit

I have a simple QComboBox to enable/disable a feature:

QComboBox *onOffComboBox = new QComboBox();
onOffComboBox->insertItem(0, "Off");
onOffComboBox->insertItem(1, "On");

The combo box is added as a cell widget to a table:

this->ui->settingsTable->setCellWidget(rowNumber, 1, onOffComboBox);

enter image description here

Now i want to change the background color of the button but not the select items.

My first approach was simply to use QWidget's setStyleSheet function:

onOffComboBox->setStyleSheet("background-color: red;");

But this suppresses the standard style:

enter image description here

I also used variations with specific QComboBox styles according to the documentation:

onOffComboBox->setStyleSheet("QComboBox::drop-down {background: red;}");

But this only colors the part with the arrow and suppresses it's style:

enter image description here

Using just QComboBox {background: red;} has the same result as with background-color: red; just the select items are not colored.

Just as described in this answer another approach is to use QPallete:

QPalette pal = onOffComboBox->palette();
pal.setColor(QPalette::Base, QColor("red"));
onOffComboBox->setPalette(pal);
onOffComboBox->update(); // just in case this has any effect

This only colors the select items:

enter image description here

I also tried nearly all other QPalette color roles:

  • QPalette::Window, QPalette::Foreground, QPalette::Button - do nothing
  • QPalette::Base - colors the select items (see pic)
  • QPalette::Text - colors the text of the button and the select items

So, how can i change the color of the QComboBox drop-down button background WITHOUT overwritting or suppressing the standard style?

The styles of the pop-up items also shouldn't change.

Here is an image of what i want:

enter image description here

Community
  • 1
  • 1
goulashsoup
  • 2,639
  • 2
  • 34
  • 60
  • By "button", are you referring to the down-arrow? – TrebledJ Jan 12 '19 at 15:05
  • @TrebuchetMS No, the whole rectangle to click on to select an item... – goulashsoup Jan 12 '19 at 15:14
  • @goulashsoup Do you want to change the background color of the popup items ,? you also mention something of the selected item that I do not understand, please do not use the term button if what you indicated above is correct because it brings confusion – eyllanesc Jan 12 '19 at 16:31
  • @eyllanesc I added an image which shows what the desired outcome is... Actually the official documentation also uses the word _button_: [_The drop-down button of a QComboBox._](http://doc.qt.io/qt-5/stylesheet-reference.html#drop-down-sub). – goulashsoup Jan 12 '19 at 16:56
  • @goulashsoup okay, then you do not want to change the color of the popup items so my premise was wrong – eyllanesc Jan 12 '19 at 17:00
  • @eyllanesc Yes, the bg-color of the pop-up items should stay white, selected/hovered blue... – goulashsoup Jan 12 '19 at 17:11
  • Here https://github.com/ColinDuquesnoy/QDarkStyleSheet/blob/master/qdarkstyle/style.qss style for all widgets. Just use what you need and edit it. – Deep Jan 13 '19 at 18:00

1 Answers1

2

QComboBox is always tricky to customize because it is made of subwidgets (even conditional subwidgets).
I made tests and your simple stylesheet QComboBox {background:red} works almost fine for me on Linux, except that the box-border is also red in the dropdown. The behaviour seems to be different depending on the GUI style.

From the doc :

Note: With complex widgets such as QComboBox and QScrollBar, if one property or sub-control is customized, all the other properties or sub-controls must be customized as well.

It looks like you have to customize everything if you want to customize the button... Then it would not be possible to change the colour without overwriting or suppressing the standard style.

You could style the whole drop-down to mimic the native look, but it's not nice to do and not robust (and not portable).

QComboBox QAbstractItemView {
  border: 1px solid grey;
  background: white;
  selection-background-color: blue;
}
QComboBox {
  background: red;
}
ymoreau
  • 3,402
  • 1
  • 22
  • 60
  • You nailed it. I had hoped that i could access the native looks style somehow but this seems not possible. – goulashsoup Jan 28 '19 at 17:46
  • Maybe there is a very tricky way to do so that I am missing, but according to the doc this is not possible straight-forward. I asked a related question to your problem, but I don't think it is possible either : https://stackoverflow.com/q/54403698/6165833 – ymoreau Jan 29 '19 at 08:22