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:

enter image description here

Focused button:

enter image description here

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

Can you post your css? e.g. pushButton->setStyleSheet("QLineEdit { background-color: yellow }"); — Son-Huy Pham, Jun 24 '13 at 16:12
Are you assigning CSS to the MainWindow or directly to the push button? I'm using Qt5 and am not observing your issue. — Son-Huy Pham, Jun 24 '13 at 16:24
Your CSS post is inconsistent with the stylesheet you linked to (it's missing the QPushButton:hover). — Son-Huy Pham, Jun 24 '13 at 16:27
Can you double check to make sure that what you've input is the same as what is output? Try something like: qDebug() << ui->pushButton->styleSheet(); — Son-Huy Pham, Jun 24 '13 at 16:32
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/32285/discussion-between-nkint-and-huytard) — nkint, Jun 24 '13 at 16:45

score 11 · Answer 1 · answered Dec 16 '16 at 15:46

11

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

answered Dec 16 '16 at 15:46

HappyCactus

1,935
16
24

Where should I put this code? I'd like the same effect for all buttons. – Sigur Dec 31 '21 at 17:15
@Sigur you can set a default application stylesheet with [`QApplication.setStyleSheet()`](https://doc.qt.io/qt-5/qapplication.html#styleSheet-prop). Be aware that if you do set an global stylesheet, [selectors](https://doc.qt.io/qt-5/stylesheet-syntax.html#selector-types) are *mandatory*. – musicamante Feb 05 '22 at 02:38

score 10 · Accepted Answer · answered Jun 25 '13 at 09:47

10

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

answered Jun 25 '13 at 09:47

chelmuth

124
3

impressive.. it works.. I thought it was an Ubuntu problem (see my own answer at http://stackoverflow.com/a/17297035/433685 ).. but let me ask one thing more: how to change this behavior and instead of return (drawing nothing) underline the text? – nkint Jun 25 '13 at 12:19
`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. – chelmuth Jun 27 '13 at 08:18
I also wanted to underline QPushButtons on hover like this but it does not work. The text is not underlined. – philk Nov 01 '13 at 19:49
6

`QPushButton { outline: none; }` is the way to remove the focus rect ***without writing code***. It is an undocumented property. – user362515 May 05 '14 at 16:51
@user362515 that sounds pretty neat. Does the property exist in Qt4 and Qt5? – chelmuth May 06 '14 at 06:44
@chelmuth yes, it wirks both for qt4 and qt5. – avtomaton Feb 26 '15 at 20:10
@user362515 it's documented by the community: [qt4 help page](http://qt-project.org/doc/qt-4.8/stylesheet-reference.html) – avtomaton Feb 26 '15 at 20:11
Generally after using this proxy general stylesheets (`setStyleSheet(...)` methods) won't work without any additional tweaks... – avtomaton Feb 26 '15 at 20:13
@avtomaton Indeed. And vice versa: if the stylesheet keeps working, the proxy won't anymore: https://marcmutz.wordpress.com/private-practice/whats-in-a-proxy-style/ – vines Nov 21 '16 at 09:46

score 6 · Answer 3 · answered Feb 26 '15 at 20:03

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.

This should be the accepted answer. `outline: none` perfectly worked for me. @avtomaton, you've saved my day. — Dmitrii Volosnykh, Jan 13 '16 at 16:40

Son-Huy Pham · Answer 4 · 2013-06-24T16:52:43.920

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

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?? — nkint, Jun 24 '13 at 16:44
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.. — nkint, Jun 24 '13 at 16:50
Yeap, both that code snippet and loading the entire css file worked on Windows and Ubuntu — Son-Huy Pham, Jun 24 '13 at 16:51

score 2 · Answer 5 · edited May 23 '17 at 11:45

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.

QT - CSS: decoration on focus

Normal button:

Focused button:

5 Answers5

Linked

Related