QComboBoxes and stylesheets

Mummoc

Hi everyone,
In my application I currently have a QComboBox with the following stylesheet applied to it:

QComboBox {
  border: 1px solid #b4b6ba;
  border-radius: 4px;
  padding: 3px 6px;
}

Resulting in this:
The issue is that when navigating using the keyboard, there is no visual clues when this QComboBox gets focus. To fix this I added a rule to my stylesheet:

QComboBox:focus:!hover{
  background-color: blue;
  background-clip: content;
  color: white;
}

Now when the QComboBox gets focus i get this result:

While this is better, I would like for the drop button to not be coloured, basically it should ignore the previous rule.
I know i can modify the drop-down using the ::drop-down subcontrol but i'm not sure how to do it.
I can add rules to the ::drop-down but how can you tell it to ignore a rule of QComboBox ?

I tried

QComboBox::drop-down {
 background-color: transparent;
}

Thinking it would mean the ::drop-down would never get a background but instead the button is invisible now.

I'm at a loss now I don't know what to try next. Is what I want even possible ?

Anyway thanks in advance :)

LucaCiucci

I think the only way to do that is to assign an icon to the ::arrow-down: looks like that if you style ::drop-down, ::arrow-down also looses the icon. In my case, this works:

/* remove this:
QComboBox::drop-down {
 background-color: transparent;
}
*/

QComboBox::down-arrow {
    image: url(:/images/icons/some-icon.svg);
}

I hope this helps

Mummoc

@LucaCiucci Hi, thanks for your reply.

I tried what you suggested, and it did not work exactly like I wanted. But it did get me on the right track and instead of putting an image on the ::down-arrow I instead put it directly on the ::drop-down (I simply screenshotted the arrow and added it as a .png).
Here's how my css looks now:

QComboBox {
  border: 1px solid #b4b6ba;
  border-radius: 4px;
  padding: 3px 6px;
}

QComboBox:focus:!hover{
  background-color: blue;
  background-clip: content;
  color: white;
}

QComboBox::drop-down {
  image: url(:/images/ComboBox_down_arrow.png);
}

And here's the result I get, which is exactly what I wanted:

Thanks for your help, I'm marking this as solved.