How to style QPushButton's checked state to remove grey dots?
Asked Answered
S

1

8

I am using Qt 5.3.0. When I apply some background-color on the QPushButton's checked state, the button will be filled with grey dots (over the background color I wanted) when it is checked.

Here is a tiny test program (with qtcreator but it can also be done with coding): 1, create an qt application 2, drag in a QPushButton, set it to flat and checkable 3, add these lines before w.show()

w.setStyleSheet("\
                QPushButton {   \
                    color:white;    \
                }   \
                QPushButton:checked{\
                    background-color: rgb(80, 80, 80);\
                }\
                QPushButton:hover{  \
                    background-color: grey; \
                    border-style: outset;  \
                }  \
                ");

4, run the app and check the button

You'll see the button turns to dotted but I need the checked button to be in solid color as rgb(80, 80, 80). Did I miss something?

Sachet answered 13/7, 2014 at 1:13 Comment(0)
P
20

I'm able to remove the dots by simply set border: none; on the QPushButton:checked property of stylesheet.

On your example, it should be like this:

w.setStyleSheet("\
                QPushButton {   \
                    color:white;    \
                }   \
                QPushButton:checked{\
                    background-color: rgb(80, 80, 80);\
                    border: none; \
                }\
                QPushButton:hover{  \
                    background-color: grey; \
                    border-style: outset;  \
                }  \
                ");

And here you can see the result when the button is checked:

enter image description here

Prevail answered 13/7, 2014 at 4:49 Comment(2)
On that page: qt-project.org/doc/qt-4.8/stylesheet-reference.html has a Warning: "If you only set a background-color on a QPushButton, the background may not appear unless you set the border property to some value. This is because, by default, the QPushButton draws a native border which completely overlaps the background-color." and I remember that in some situations remove the border solves my problem. I can't tell you exactly why, but it works.Prevail
Thank you for the answer and the link to the reference. Really saved me today!Syrian

© 2022 - 2024 — McMap. All rights reserved.