[FIXED] QSS on combo box drop down is not being applied?

Issue

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.

Solution

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

Answered By - musicamante