QSS on combo box drop down is not being applied?

Question

I am trying to get a apply qss to a combobox to make the item selected or hovered over to have a blue rectangle of height 30 and rounded corners, this is in addition to the qss on the combo box itself.

    self.b2 = QComboBox(self)
    self.b2.addItems(['Choose','UX Research', 'Mobile Design', 'Visual Design','UX/UI Design','Illustration'])
    self.b2.setFixedSize(220, 38)
    self.b2.move(24, 24)
    self.b2.setPlaceholderText("Choose")
    
    self.b2.setStyleSheet("""
        QComboBox {
           background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0.8,
                            stop:0 rgb(71, 78, 83),
                            stop:1 rgb(49, 54, 58));
            border: none;
            border-radius: 19px;
            color: #f2f2f2;
            font-size: 14px;
            padding-left:16px;
        }
        
        QComboBox:hover {
           background-color: qlineargradient(x1:0, y1:0, x2:1,  y2:0.8,
                            stop:0 rgb(66, 73, 78),
                            stop:1 rgb(54, 49, 53));


        }
        
        QComboBox:focus {
           background-color: qlineargradient(x1:0, y1:0, x2:1,  y2:0.8,
                            stop:0 rgb(61, 68, 73),
                            stop:1 rgb(39, 44, 48));

                            }
        QComboBox::down-arrow { width: 0px; image: url(:None); }
        QComboBox::drop-down { border: none; background:none;}
        
    QComboBox QAbstractItemView {
        border:0px;
        background-color: #31363A;
    }
        
        
    QComboBox::item {
        min-height: 35px;
        min-width: 50px;
        outline: none;
    }
    QComboBox::item:selected{
        color: black;
        background-color: lightgray;
    }       
     
    """)
    
    
    shadow2 = QGraphicsDropShadowEffect(self.b2)
    shadow2.setBlurRadius(29)
    shadow2.setOffset(2,2)
    shadow2.setColor(QColor(63, 228, 192,45))
    self.b2.setGraphicsEffect(shadow2)

Here is what my combobox looks like:

The drop down menu has not changed at all.

after applying self.b2.setStyle(QStyleFactory.create('fusion')) adn chnaging teh qss to directly specify QComboBox and not QItemView, it looks like this. The main problem is that the drop down has a border and there seems to be a massive gap between the word and the start of the list.

Typo: the type selector should be `QListView`, there is no such thing as `QItemView`. Besides, if you're using `setView()` just to set the stylesheet, that's pointless: just append the QListView stylesheet to that of the combo box. — musicamante, Apr 29 '23 at 00:11
Please show us how you actually set the code that results in the second image. — musicamante, Apr 29 '23 at 17:59
updated the question to show my current code and then chnaged it to be clear to any one reading in the future — john truman, Apr 30 '23 at 14:45
Try to use the QComboBox as main selector when using the pseudo classes, and use `selected` instead (since the popup *selects* items when they are hovered): `QComboBox::item` and `QAbstractItemView::item:hover`. Also, since you're not using the default style at all, use the fusion one, as it's more compliant when using QSS: `self.b2.setStyle(QStyleFactory.create('fusion'))`. Let me know if it works (but it should, theoretically) and I'll eventually explain why in an answer. Btw, for future reference, try to provide a complete and self-contained [mre], as it makes things easier for us. — musicamante, May 01 '23 at 00:56
It kinda works, it does appply the qss but now it also adds more probelms. I have updated the answer to show this — john truman, May 01 '23 at 12:07
Ok, but for future reference please consider adding the modifications as a separate code (even just the modified lines), otherwise other people won't be able to understand the changes and the comments would result as very confusing. — musicamante, May 01 '23 at 16:24

score 0 · Accepted Answer · answered May 01 '23 at 16:21

The original issue (see the edit history) was caused by the fact that the sub control selectors were applied to the view, but for complex widgets as QComboBox they should always be set for the "container" widget.

Also, since the mouse hover of a combo popup actually selects items, the correct pseudo state is selected, not hover.

Instead of this:

    QComboBox QAbstractItemView::item {
       ...
    }
    QComboBox QAbstractItemView::item:hover {
       ...
    }

It should be this:

    QComboBox::item {
       ...
    }
    QComboBox::item:selected {
       ...
    }

Then, when applying a complete styling of a widget, it's normally preferable to use the fusion style. In case you are going to style almost anything in the program, set the style application wide, otherwise set it for the specific widget:

app.setStyle('fusion')
# otherwise
widget.setStyle(QStyleFactory.create('fusion'))

Note that you have other issues, besides what you already pointed out:

the border should either specify all its properties or just use none;
the fusion style annoyingly adds a checkmark next to the currently selected item, which is what causes the padding you see on the left (see this related post); you need to reset the left padding of items and make the indicator transparent;
setting min-width and min-height on items is not effective, you should instead set the height or max-height;
when specifying dimensions of areas in stylesheets, it's usually better to use font related sizes (em instead of px);

Here is the final part of the QSS considering the above aspects.

    QComboBox QAbstractItemView {
        border: none;
        background-color: #31363A;
    }
        
    QComboBox::item {
        padding-left: 0.5em;
        height: 2em;
    }
    QComboBox::item:selected {
        color: black;
        background-color: lightgray;
    }
    QComboBox::indicator {
        color: transparent;
        background-color: transparent;
        selection-color: transparent;
        selection-background-color: transparent;
    }

QSS on combo box drop down is not being applied?

1 Answers1