6

I have two custom-styled QPushButton buttons. Here is the stylesheet for the Ok button:

QPushButton
{ 
    background-color:#9dce2c;
    border-radius:7px;
    border:1px solid #83c41a;
    color:#ffffff;
    font-size:15px;
    font-weight:bold;
    padding:4px 24px;
    text-decoration:none;
}
QPushButton:pressed
{
    border:2px solid black;
}

Now here's what it looks like:

Ok button

which is fine. However, if the button is clicked (gets focus), it starts to look like this:

Ok button focused

Note that slight shadowy rectangle around the text. It looks as if the text is being "selected". When the button loses focus, it starts looking normal again. I suppose it happens because the selected controls get highlighted like this:

enter image description here

However, I want my button to stay unchanged, no matter whether it's focused or not. Is there any way to solve this issue?

0

4 Answers 4

4

This removes the orange rectangle :

QPushButton:focus {
    outline: none;
}

PS : You should try to add some style to the focus state like a changed background-color so that this state stays "visible" to the user.

3

Found the solution. It turned out to be very simple.

The issue was indeed caused by the button receiving focus. All I needed to do is set the button's focusPolicy attribute to NoFocus. It can be done either in QtDesigner:

enter image description here

or in the code:

ui.okButton->setFocusPolicy(Qt::NoFocus);

After it's done, the clicks on the button will not cause it to get focus, and the appearance will not change.

4
  • 3
    You may get the slight difference in behavior - when you have focus on button you may 'press' it by the Space key, but it all depends on what you need. Personally I always liked the GUIs that can be used by keyboard, so bad that developers overlook this feature these days :(.
    – kolenda
    Jul 31, 2012 at 10:01
  • @Kolenda, yes, I'm aware of this. I have a QLineEdit on my form, which the user will use to input his stuff. I will track for Enter hits in this QLineEdit, and force the button press when that happens. Jul 31, 2012 at 10:06
  • @Kolenda, that's a good point though, I find it very disappointing not to be able to hit enter to complete the filling, too. Jul 31, 2012 at 10:07
  • The screenshot you provided is of Qt Designer, not Qt Creator. Creator is an IDE, which can (but not necessarily) integrate Designer
    – friendzis
    Jul 31, 2012 at 12:27
0

I didn't try but I think you could fix that by setting QPushButton:hover to the same style as QPushButton. There's some default style that makes the button red on hover, you just need to find out which one it is (probably hover) and override it.

3
  • It doesn't become red on hovering. It becomes so after it's clicked, and remains so until any other control is clicked. Jul 31, 2012 at 7:54
  • @SingerOfTheFall, right, then try the QPushButton:focus state.
    – laurent
    Jul 31, 2012 at 7:56
  • @SingerOfTheFall, or could it be the :default state? Logically not but could be worth a try.
    – laurent
    Jul 31, 2012 at 8:06
0

Here: http://doc.qt.io/qt-5/stylesheet-examples.html

I've found parameters like:

"selection-color: yellow;"
"selection-background-color: blue;"

I haven't tried them but it might be what you need.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.