CODEWITHSUNDEEP
qtstylesheet
jhowland
jhowland

Reputation: 385

color of QPushButton or QToolButton

I am using a Qstylesheet to control the behavior of some QPushButtons and QToolButtons. When I hover over them, they turn black, as I want them to. However, once I press them, they turn a funny greyish reddish color, and there is a red box drawn inside of them.

What is the property or pseudo state that I have to set in order to avoid this behavior? I have been through all the properties related to selection, and background, and cant get this to go away

Upvotes: 2

Views: 4183

Answers (1)

Liz
Liz

Reputation: 8968

Without seeing your style it's a little difficult to fix your problem. So what I'll do is explain a little how things work, and hopefully you can decide how best to address your problem.

First, it's important when your styling your button to ensure that you cover all your bases. I'm sure you know most of this, but just in case...

A QPushButton and QToolButton have a number of states that can be styled, so you want to make sure that you make your button noticeably different for each state so that the user can tell the difference.

QPushButton
{ 
   //  The default look of your button
}

QPushButton:disabled 
{ 
}

QPushButton:pressed  
{  
}

QPushButton:focus    
{
}

QPushButton:hover
{
}

QPushButton:checked
{
}

Use things like the background color, foreground color, border color, and generally you are good to go.

background-color: red;
color: white;  // foreground color
border-width: 1px;
border-color: black;

The second thing to know is this, styles can be inherited. So be really careful when you add a style to a widget. When you create a style try to be specific. If you give this style to something in your UI, the background color will be blue, but the dangerous thing, is that all child widgets of this one will also inherit this style. 

QWidget
{
    background-color: blue;
}

Maybe that's what you want, but often not. So if you are styling buttons always put the QPushButton or QToolButton selector around them, the same should apply for other things you are styling too. So it's possible that's where your greyish reddish color is coming from.

Now, the last thing to know about styling buttons is the focus rectangle. It is the irritating dotted line that appears when your button has been focussed. See the picture below.

Focus rectangle

The unfortunate thing is that there is there is no way to style the focus rectangle using style sheets. But you can get rid of it, if that's what you want. See the following link:

Getting rid of the focus rectangle

So, in summary...

  1. Make sure that your button style covers all the states that you need.
  2. Make sure that your button isn't influenced by any other styles you have added to other widgets.
  3. Either change, or get rid of the focus rectangle as needed.

I hope that helps. If you want more specific help, then please post your style, and I'll take a look at it.

Upvotes: 6

Related Questions