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

Question

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?

Answer 1

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: