8

For already existed Qt project I'd like set border for focused widgets through qss-fle. But I faced out with some unexpected result. When I change border of QSpinBox (and QDoubleSpinBox) border will change as I expect but up-button and down-button change too and look ugly.

enter image description here

Here is my style definition (full example available here):

QSpinBox:focus
{
    border-width: 2px;
    border-style: solid;
    border-color: green;
}

My question is: how to change appearance of border and simultaneously preserve appearance of up-button and down-button. Solution what I am looking for shouldn't be cross platform or cross version.

My environment:
- KUbuntu 15.10 (amd64);
- Qt 5.4 (x64).

Update:

Here is one more example with another style:

QSpinBox
{
    border-width: 2px;
    border-style: solid;
    border-color : red;
}

QSpinBox:hover
{
    border-width: 2px;
    border-style: solid;
    border-color: blue;
}

The widget looks like this:

enter image description here

Gluttton
  • 5,739
  • 3
  • 31
  • 58
  • i guess you have already tried to set a style for your up-arrow and down-arrow ? If not there is qss examples there http://doc.qt.io/qt-4.8/stylesheet-examples.html#customizing-qspinbox – floppy12 Feb 02 '16 at 20:45
  • Your problem is maybe due to the propagation of your "focus" style to the whole widget including arrows, in particular the border-with property.. which could cause this kind of unexpected behavior – floppy12 Feb 02 '16 at 20:47
  • @floppy12, I have not try. It is difficult for me to reproduce appearance of buttons. – Gluttton Feb 02 '16 at 21:21
  • You should not reproduce it entirely ; i meant you should precise a style even a default one to prevents you "focus" style to override it - take an example from the link below and try it – floppy12 Feb 02 '16 at 22:38
  • @floppy12, `precise a style even a default one` I can't see how to do it. Can you provide some example? Do you mean: `QSpinBox::up-button {}`? – Gluttton Feb 03 '16 at 06:47
  • 3
    For what it's worth: I get a very similar behaviour on Qt5.4 on Windows when setting your stylesheet to a spinbox -- the buttons look ugly. Indeed it seems that once you do a any stylesheet change to the spinbox, you have to go all the way and specify the rest via stylesheet, too (as floppy12 suggested). But really: Are we (i.e. the OP) supposed to provide our own handmade `up_arrow.png` etc. to make a simple stylechange work? How messed up is that? I agree with Glutton that this would be difficult! – ThorngardSO Feb 04 '16 at 04:33
  • When you change a border - then native platform style is removed. There is only one way to prevent such fails: is to use sone non-native styles. For example: `QApplication::setStyle( QStyleFactory::create( "Fusion" ) );` – Dmitry Sazonov Feb 05 '16 at 12:55
  • @Saz , When I add the following line, appearance of the widget will remain the same as screenshot. – Gluttton Feb 05 '16 at 13:08
  • Please take a look at this post: http://www.qtcentre.org/threads/43489-QSpinBox-setting-buttons-with-using-stylesheets – frogatto Feb 11 '16 at 21:10

2 Answers2

4

When you apply a style sheet to the QSpinBox, this widget is completely painted using the QStyleSheetStyle (this class is not part of the public API).

So you have to either style your spin box completely, including the up/down buttons or not to use the style sheet at all.

That up/down buttons are not separated widgets, so you can't apply a different style to them.

So I suggest to subclass the QSpinBox and reimplement the paintEvent() method. In your paintEvent() method you will just call it's default implementation and than you will draw a rectangle around.

Tomas
  • 2,170
  • 10
  • 14
2

try to edit your qss file with another random style to see if it's consistent.

QSpinBox
{
    border-width: 2px;
    border-style: solid;
    border-color : red;
}

QSpinBox:hover
{
    border-width: 2px;
    border-style: solid;
    border-color: blue;
}

Edit :

I see that your arrows are still in bad form so I would suggest you two things :

  • style also your up-down arrows with background image property or so (take a screen shot of the desired arrows..or so)

  • forger to style this part via stylesheet and override the "QPaintEvent onFocus handler" by code. Setting the border as green wouldn't be so painful

floppy12
  • 1,045
  • 6
  • 12