How to remove QPushButton focus rectangle using stylesheets

Question

I have a QPushButton and when it is on focus it has a rectangle on it that I want to remove. Here some screenshot:

Normal button:

Focused button:

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

QPushButton:focus

But, it keeps on highlighting.

QPushButton stylesheet:

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 stylesheet.

Contrecoup

Answer 1

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);

Papaw

impressive.. it works.. I thought it was an Ubuntu problem (see my own answer at https://mcmap.net/q/764747/-how-to-remove-qpushbutton-focus-rectangle-using-stylesheets ).. but let me ask one thing more: how to change this behavior and instead of return (drawing nothing) underline the text? – Contrecoup

QPushButton:hover { text-decoration: underline; } qt-project.org/doc/qt-4.8/stylesheet-reference.html Otherwise, you really have to paint the underline, but with this I have no experience. – Papaw

I also wanted to underline QPushButtons on hover like this but it does not work. The text is not underlined. – Meredith

QPushButton { outline: none; } is the way to remove the focus rect without writing code. It is an undocumented property. – Qualify

@Qualify that sounds pretty neat. Does the property exist in Qt4 and Qt5? – Papaw

@Papaw yes, it wirks both for qt4 and qt5. – Babble

@Qualify it's documented by the community: qt4 help page – Babble

Generally after using this proxy general stylesheets (setStyleSheet(...) methods) won't work without any additional tweaks... – Babble

@Babble Indeed. And vice versa: if the stylesheet keeps working, the proxy won't anymore: marcmutz.wordpress.com/private-practice/whats-in-a-proxy-style – Eeg

Answer 2

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

Fincher

Where should I put this code? I'd like the same effect for all buttons. – Summers

@Summers you can set a default application stylesheet with QApplication.setStyleSheet(). Be aware that if you do set an global stylesheet, selectors are mandatory. – Amora

Answer 3

One more alternative (works on Windows and 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 are drawn with a dot pattern, not a 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 the dotted pattern disappeared! Now my checked buttons are clean, as I expected with solid background style.

Babble

Answer 4

I ran this snippet of code both on Windows 7 (Qt5) and on Ubuntu 12 (Qt4.8). There are no problems with it:

QFile file("style.css");
if(file.open(QIODevice::ReadOnly))
{
  QString data = file.readAll();

  // "this" is the derived QMainWindow class
  this->setStyleSheet(data);
}

And alternatively...

ui->pushButton->setStyleSheet("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);"
                              "}"
                              );

qDebug() << ui->pushButton->styleSheet();

Conformation

after clicking on that button you don't have the light-orange rect I have in the screenshot?? Also with the complete css file I linked setted up in QApplication?? – Contrecoup

If I copy your code and apply the style ONLY to the instance of QPushButton I have the same problem.. this let me think that could be some Ubuntu preferences.. – Contrecoup

Yeap, both that code snippet and loading the entire css file worked on Windows and Ubuntu – Conformation

Answer 5

Thanks to Huytard's answer I have found out that is not a Qt CSS problem but it is the normal behavior of my Ubuntu Appearance setting to add an Orange rect on focused buttons.

The theme Ambiance is the default theme in Ubuntu 12.04 and it has the graphical behavior of enhancing focused elements with an orange inner rectangle.

If I change the theme the effect I posted about and I thought was QT CSS problem is gone away. So.. it is not a QT CSS problem but Ubuntu. If someone is interested in that.. http://askubuntu.com is full of information about changing the main theme color.

Contrecoup