Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Change QComboBox background to semi-transparent



  • 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.


  • Lifetime Qt Champion

    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.



  • @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?


  • Lifetime Qt Champion

    @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 ?



  • 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).


  • Lifetime Qt Champion

    @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



  • If I apply transparent background to QWidget, I get this result:
    Schermata 2020-03-28 alle 08.50.40.png
    As you can see, the dropdown is transparent too, so maybe there's a way to target it and override the QWidget style?


  • Lifetime Qt Champion

    @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.



  • @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.


  • Lifetime Qt Champion

    @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.



  • 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);
    }
    

    Schermata 2020-03-28 alle 20.21.31.png
    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);
    }
    

    Schermata 2020-03-28 alle 20.27.20.png
    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.


  • Lifetime Qt Champion

    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::


Log in to reply