1
votes

I'm developing a GUI in Qt 4.8 ( C++ being the base language ), and I have trouble stylizing a QSpinBox.

I'd like the widget to have a nice rounded border ( I've disabled the up and down buttons via Qt Creator ) using Qt Style Sheets and I manage to do it quite fine with the following code:

QSpinBox {
    color: white;
    selection-background-color: black;
    border: 1px solid white;
    border-radius: 5px;
    padding-left: 2px;
    padding-top: 2px;
}

However, as soon as I try to set a background color, whether by defining the background or background-color property, the background color fills the entirety of the widget's rectangle, making the widget quite ugly ( at this point, the white borders are still correctly rounded ).

QSpinBox {
    color: white;
    selection-background-color: black;
    background: blue;
    border: 1px solid white;
    border-radius: 5px;
    padding-left: 2px;
    padding-top: 2px;
}

I'd of course want the background-color rectangle to be rounded in the same way. I've tried to play a bit with the background-clip and background-origin properties like that:

QFrame, QSpinBox {
        color: white;
        selection-background-color: black;
        background-origin: border;
        background-clip: border;
        border: 1px solid white;
        border-radius: 5px;
        text-align:center;
        padding-left: 2px;
        padding-top: 2px;
}

But nothing that I try seems to do the trick. Is there something I missed, or do wrong ?

1
Your CSS works for me using Qt5.5, maybe it was a bug in Qt4 ? - ymoreau
Maybe. The strange thing is that when I don't set a 'background', the default one assigned by Qt Creator does respect the rounded borders... - Cyril C.
Not ideal but have you tried to change the colours through the QPalette instead of the style-sheet ? - ymoreau
Nope. I've sticked with ugly straight corners for the moment, but I'll give a try via QPalette. I'll update if I achieve anything with it, thanks for the suggestion ! - Cyril C.

1 Answers

1
votes

Use setAutoFillBackground(false);