QT - CSS: decoration on focus

Question

I'm experimenting a bit with CSS for making a cool user interface for my QT application.

I have this problem: I have a QPushButton and when it is on focus it has a rectangle on it that I want to remove. Here some screen-shot:

Normal button:

Focused button:

I have tried to add something (backgroundcolor, text-decoration, etc)

QPushButton:focus

but it keeps on highlighting..

Some hints?

here is the QPushButton css code:

QPushButton
{
    color: #b1b1b1;
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #565656, stop: 0.1 #525252, stop: 0.5 #4e4e4e, stop: 0.9 #4a4a4a, stop: 1 #464646);
    border-width: 1px;
    border-color: #1e1e1e;
    border-style: solid;
    border-radius: 6;
    padding: 3px;
    font-size: 12px;
    padding-left: 5px;
    padding-right: 5px;
}

QPushButton:pressed
{
    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #2d2d2d, stop: 0.1 #2b2b2b, stop: 0.5 #292929, stop: 0.9 #282828, stop: 1 #252525);
}
   
QPushButton:hover
{
    border: 2px solid QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #ffa02f, stop: 1 #d7801a);
}

QPushButton:focus {
    /*background-color: red;*/
}

ps. I'm on Ubuntu 12.04,with Qt 4.8 and I'm using this wonderfull css: http://www.yasinuludag.com/darkorange.stylesheet

Answer 1

For some reason the accepted answer doesn't seem to work (at least on Qt5.6). This makes the work for me:

QPushButton:focus {
   border: none;
   outline: none;
}

Answer 2

The highlighted rectangle may be the QStyle::PE_FrameFocusRect styling. The only way to get rid of it is by implementing a custom style. Fortunately, Qt provides a way to implement just a proxy, which uses another style in the general case. For the focus rectangle you'd implement:

class Style_tweaks : public QProxyStyle
{
    public:

        void drawPrimitive(PrimitiveElement element, const QStyleOption *option,
                           QPainter *painter, const QWidget *widget) const
        {
            /* do not draw focus rectangles - this permits modern styling */
            if (element == QStyle::PE_FrameFocusRect)
                return;

            QProxyStyle::drawPrimitive(element, option, painter, widget);
        }
};

qApp->setStyle(new Style_tweaks);

Answer 3

One more alternative (works in windows and in ubuntu), for simplicity I use solid colors:
ui->pushButton->setStyleSheet( "QPushButton { background-color: #0188cc; color: #ffffff; outline: none }" );

Note "outline: none" property - it removes focus rectangle from the button.

And one more related tip for checkable buttons: by default checked buttons drawed with dot pattern, not solid color as I expected for
"QPushButton:checked { background-color: #0188cc; color: #ffffff; }".

I added "border: none" to the button stylesheet:
"QPushButton:checked { background-color: #0188cc; color: #ffffff; border: none }",
and dotted pattern disappeared! Now my checked buttons are clean, as I expected with solid background style.