custom down arrow buttons using CSS in Qt - qt

Question

We're developing a touch screen Qt application in C++ forms that requires a wide down arrow graphic image as well as a custom background. I've been trying to get something that works using QSS, but have thus far been defeated.
The only way I found to get a wide button (one larger than 16 pixels) is to use negative margins:
QComboBox {
min-height:63px;
max-height:63px;
margin-right:47px;
border-image:url(Resources/ComboBox_Center1.png);
font-family: "Franklin Gothic Medium";
font-size: 22px;
}
QComboBox::drop-down {
width:47px;
border:0px;
margin:0px;
margin-right:-47px;
}
QComboBox::down-arrow {
image:url(Resources/ComboBox_Right1.png);
}
This puts the button at the correct position and makes the input area the correct size, but then the down arrow only opens the combobox, not open and then close.
All other options either extend the input area onto the area (margin, border) or shrink the entire control.
Setting the background-image tag had no effect - only the border image showed the image.
Note that the border image (or background color) always shows up even under the arrow.
Is there some way to style just the input section of a combo box? It seems like that portion of the combo should have its own child selector, but I haven't seen it.

Answer 1

Try this...
QComboBox {
min-height:63px;
max-height:63px;
font-family: "Franklin Gothic Medium";
font-size: 22px;
padding: 1px 1px 1px 1px;
}
QComboBox::drop-down {
width: 47px;
border: 0px;
}
QComboBox::down-arrow {
image: url(Resources/ComboBox_Right1.png);
width: 42px;
height: 42px;
}
Note: the width and height on the down-arrow image will depend on the image you are using. These work for my image.
There are some weird things about style-sheets - and a lot of hidden tricks. It might be worthwhile taking a few minutes to go through this which describes the basic principles behind how style sheets work. They seem easy, but even after using them for a while, I often go back to the examples and documentation.
Background images are one of those things that is not obvious. Here is something I took directly from the doc. In most cases when setting an image for the background what we really want is to set the border-image. I'm assuming the reason you don't see the "background-image" is that the combo-box is a "complex" widget - meaning that it is made up of a few others - and so that background is hidden behind them.
It is common to try the background-image property, but this has a
number of drawbacks: For instance, the background will often appear
hidden behind the button decoration, because it is not considered a
background. In addition, if the button is resized, the entire
background will be stretched or tiled, which does not always look
good. It is better to use the border-image property, as it will always
display the image, regardless of the background (you can combine it
with a background if it has alpha values in it), and it has special
settings to deal with button resizing.
As for styling the input area... assuming your QComboBox is editable, the input area is just a QLineEdit. So you could always assign a style sheet to the line edit this way
comboBox->lineEdit()->setStyleSheet(your style sheet);
I hope that helps.