Change QComboBox background to semi-transparent

[Artemis21]

I'm trying to get the dropdwown menu of my QComboBox semi-transparent but it doesn't change unless I'm changing also the QWidget background. I can only use CSS.

I've tried

QComboBox {
background-color: rgba(0, 0, 0, 0.44);
}

and

QComboBox:!editable, QComboBox::drop-down:editable {
background-color: rgba(0, 0, 0, 0.44);
}

It just never changes to transparent, it's opacity it's dictated by QWidget but I just want the dropdown to be transparent.

[mrjj]

Hi
I dont think you can with style sheets alone.
There are other widgets in play for the dropdown

https://forum.qt.io/topic/96288/qcombobox-dropdown-list-transparent-qcomboboxprivatecontainer

Also on win 10, the normal trick
if (combo->view()->parentWidget())
combo->view()->parentWidget()->setWindowOpacity(0.5);

seems to always produce black background.

It might work with a ProxyStyle but after fiddling around for a while with PE_PanelItemViewItem
and CE_ItemViewItem, i gave up.

[Artemis21]

@mrjj said in Change QComboBox background to semi-transparent:

if (combo->view()->parentWidget())
combo->view()->parentWidget()->setWindowOpacity(0.5);

Thank you, where should I put this code? I can only use stylesheet, is there any way to link this script to it?

About the ProxyStyle, might it be QAbstractItemView? How I declare it?

[mrjj]

@Artemis21

Hi
Put it in the constructor of the MainWindow that has your Combobox.
It cannot be done from stylesheet. Its must be code.

Well the dropdown is a QAbstractItemView but the proxystyle is something completely different.

https://doc.qt.io/qt-5/qproxystyle.html

In very short, its an override of the Style system that draws all widgets. So one can
change some part of it without to write a complete style object.
https://doc.qt.io/qt-5/qstyle.html

What platform are you on ?

[Artemis21]

I'm on OSX, but the software is not mine, It's a software that allow theme customization thourgh Qt CSS, so I can't edit source code poperly unless it's "called" by the stylesheet (like pictures or fonts).

[mrjj]

@Artemis21

Hi
If you only can use stylesheets its not sure its really possible
but if it does work if you apply it directly to combo itself
then there is hope.

I as far as i recall there is a Qframe involved also so you need to target that too.

https://code.woboq.org/qt5/qtbase/src/widgets/widgets/qcombobox.cpp.html

[Artemis21]

If I apply transparent background to QWidget, I get this result:

As you can see, the dropdown is transparent too, so maybe there's a way to target it and override the QWidget style?

[mrjj]

@Artemis21 1
Hi
Well its due to the cascading effect of CSS then.
But that should mean it could work!
Try setting the same stylesheet on the view directly
combo->view()
and see how that looks.

[Artemis21]

@mrjj said in Change QComboBox background to semi-transparent:

Try setting the same stylesheet on the view directly
combo->view()
and see how that looks.

Honestly I don't know what that means, I can only edit .css file. Do I have to put combo->view() inside the css? I'm sorry but I'm not a c++ programmer, I come from web design and I'm confident only with css in this case.

[mrjj]

@Artemis21
Ah sorry i keep forgetting you are not doing it from code but somehow on the .exe file.

combo->view() would give the pointer to the QWidget that is the dropdown so we could set stylesheet direct on
it. it cannot be used directly in css as we only have names and types there.

I tried

QFrame, QAbstractItemView {
	background-color: rgb(255, 170, 0,100);
}

and it does take the color but still not transparent so not sure what we are missing.

The layout is as following

QComboBox::comboBox 
    QStandardItemModel:: 
    QComboBoxPrivateContainer:: 
        QBoxLayout:: 
        QComboBoxListView:: 
            QWidget::qt_scrollarea_viewport 
            QWidget::qt_scrollarea_hcontainer 
                QScrollBar:: 
                QBoxLayout:: 
            QWidget::qt_scrollarea_vcontainer 
                QScrollBar:: 
                QBoxLayout:: 
            QItemSelectionModel:: 
            QComboBoxDelegate:: 

so i also tried

#qt_scrollarea_viewport , QFrame, QAbstractItemView {
	background-color: rgb(255, 170, 0,100);
}

But nothing bites.

[Artemis21]

I think we're getting closer.

If I do:

QWidget {
 background-color: rgba(0, 0, 0, 0.39);
 color: #fff;
 border: 1px solid rgb(19, 146, 209);
}

You can see the background is transparent, but the problem is that every Qwidget will be transparent. I can overwrite it's properties in other classes, but I don't like this option.

I tried:

QComboBox QAbstractItemView {
  background-color: rgba(0, 0, 0, 0.39);
}

As you can see, the background of the dropdown IS transparent, but it keeps the default grey color behind. If we could target it and make it transparent, that would be a win win.

[mrjj]

Hi
Well so on your platform it should be possible. ( is it linux or mac ?)
On win 10 the first style sheet still don't make it transparent so i can't really test.

I really don't know what that rounded white background is.
Could be the QWidget::qt_scrollarea_viewport

QComboBoxListView::
QWidget::qt_scrollarea_viewport
QWidget::qt_scrollarea_hcontainer
QScrollBar::
QBoxLayout::
QWidget::qt_scrollarea_vcontainer
QScrollBar::
QBoxLayout::
QItemSelectionModel::
QComboBoxDelegate::