CODEWITHSUNDEEP
qtqtstylesheetsqpushbutton
nkint
nkint

Reputation: 11733

How to remove QPushButton focus rectangle using stylesheets

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:

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.

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.

Upvotes: 15

Views: 18910

Answers (5)

avtomaton
avtomaton

Reputation: 4894

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.

Upvotes: 6

HappyCactus
HappyCactus

Reputation: 2014

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

Upvotes: 11

nkint
nkint

Reputation: 11733

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.

Upvotes: 2

chelmuth
chelmuth

Reputation: 143

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

Upvotes: 11

Son-Huy Pham
Son-Huy Pham

Reputation: 1899

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

Upvotes: 3

Related Questions