How apply different stylesheet to a QComboBox and its placeholder? - c++

I want to distinguish the placeholder text of a QComboBox using QStyleSheet by drawing the placeholder with a different color.
With Qt6, it's easy to set the placeholder text to a combo box from code if the combo box is editable:
if(someCondition)
myComboBox->lineEdit()->setPlaceholder("Some placeholder");
else
myComboBox->lineEdit()->setPlaceholder("Some other placeholder");
So far so good, but if I use a custom stylesheet, so the default grayish placeholder is gone, and it is drawn with the color property. I tried to filter by some property based on this question, but I was not successful.
This is the relevant part of the dark-theme stylesheet:
auto styleSheet = "QWidget {color: white; background-color: #505050}"
"QComboBox[text=\"\"] { color: #808080 }";
myComboBox->setStyleSheet(styleSheet);
Currently, this is the result, with white letters:
And this is the expected with a sightly gray color:
Also, I tried to filter to the QComboBox, to the QComboBox[currentText=\"\"] but no success.

To draw the placeholder with darker pen, you have to modify the stylesheet and set to the lineEdit of the QComboBox.
auto styleSheet = "QWidget {color: white; background-color: #505050}"
"QLineEdit[text=\"\"] { color: #808080 }";
myComboBox->setStyleSheet(styleSheet);
myComboBox->lineEdit()->setStyleSheet(styleSheet);
QComboBox has no option to handle the placeholder text, because that text is handled by the line edit it has. Therefore, to alter the look and feel of the placeholder, you must use it's QLineEdit. Note, that several properties not make any effect on the line edit, like the background-color or border to say some, because those are handled by the QComboBox.
Also, if it's not automatically updated, you need to connect the change of the text with the stylesheet update. In the owning widget, connect the text change signal to the update:
connect(ui->myComboBox->lineEdit(), &QLineEdit::textChanged, this
[&]{ style()->polish(ui->myComboBox->lineEdit()); });

Related

QT StyleSheet Theme for entire application using attribute selectors

Background:
I have a Qt application consisting of multiple dialogs and windows. I am trying to condense all styles into a single stylesheet which I want to load in my main.cpp with the aim of it being applied to my whole application (as I understand one should do). The application should not change styles from this point onwards.
I want to do this as styles can get mixed up, etc if one does this or something simliar for each widget in the QtCreator designer.
Problem:
I will explain a specific problem I face with an example from my application.
I have a couple of variations of simple dialogs, QLabel title, QLabel message (sometimes a QLabel hint), and either a single 'ok' QPushButton or 2 QPushButtons 'positive' & 'negative'.
For my theme, I would like to set styles for specific buttons, labels, etc which I got from here.
Example CSS:
QPushButton {
font-size: 10pt
color: #111
}
QPushButton[objectName="btnPostive"][objectName="btnProceed"] {
font-size: 1pt
color: #ccc
}
QLabel {
font-size: 9pt
color: #111
}
QLabel[objectName="lblTitle"] {
font-size: 9pt
color: #111
}
Please note, the [objectName="btnPostive"][objectName="btnProceed"] is intended to apply the style to buttons with the objectName's btnPostive and btnProceed however, it does not.
Is what I intend doing considered best practice, and a sub question (preferred example too) applying the same style to a select group of widgets, how should one best this.
If you want to control the applied stylesheet based on the object name, you can use the ID Selector QPushButton#objectName, see the full documentation. You separate multiple objects with the same stylesheet with a ,
Your stylesheet should then be this. Please note that you also need a ; at the end of each line.
QPushButton {
font-size: 10pt;
color: #111;
}
QPushButton#btnPositive, QPushButton#btnProceed {
font-size: 1pt;
color: #ccc;
}
QLabel {
font-size: 9pt;
color: #111;
}
QLabel#lblTitle {
font-size: 9pt;
color: #00f;
}

How can I set background for a QPushButton's tooltip?

In Qt I set a background image for a QPushButton, then I added a tooltip for this button and the tooltip has the same background image as the button and I couldn't change it with stylesheet, what am I missing?
In my code I have:
button->setStyleSheet("background-image: url(pathToImage);");
button->setToolTip("Click here");
In my style.qss I have:
QToolTip{
background-image: none;
background-color: white;
font-size: 20px;
border: 1px solid black;
}
The font-size and the border works, but the tooltip's background-image is the same as the button's.
I also tried adding another background-image to the tooltip, it didn't worked either.
How can I change the tooltip's background?
You have to specify the QWidget where to apply the property. If you dont do so, it will apply it to all the childrens of the widget.
In your case, to avoid the background image in the tooltip you have to specify that you want to apply that style to a QPushButton widget. The documentation says:
If we want the property to apply only to the QLineEdits that are children (or grandchildren or grand-grandchildren) of a specific dialog, we would rather do this:
myDialog->setStyleSheet("QLineEdit { background-color: yellow }");
In the example you mention, if you want to modify the style of the tooltip and the button, do something like this:
ui->pushButton->setStyleSheet(""
"QPushButton { background-image: url(me.png); }"
"QToolTip { color: #ffffff; background-color: #000000; border: 0px; }");
It will give you something like this
Update:
If you want to apply it to a single object and not the rest of the widgets of the same type, the documentation says:
If we want the property to apply only to one specific QLineEdit, we can give it a name using QObject::setObjectName() and use an ID Selector to refer to it:
myDialog->setStyleSheet("QLineEdit#nameEdit { background-color: yellow }");
So in your case:
ui->pushButton->setObjectName("awesomeButton");
ui->pushButton->setStyleSheet("QPushButton#awesomeButton { background-image: url(me.png); }");
When you set qss with setStyleSheet your stylesheet applies for all children of object. In your case you can avoid this using stylesheet for QPushButton only
button->setStyleSheet("QPushButton {background-image: url(pathToImage);}");

How to change Qmenubar item hover effect color in qt?

I have a QMenuBar in window, and background color is white, so when action is selected, or mouse is point at action, text color becomes white.
How can i change hover effect color? I tried to change from pallete by changing selected text color, but that doesn't worked
QMenuBar::setStyleSheet()
will do the trick.
You can fully customize the layout of your component. Be aware of using setStyleSheet means you'll completely override the style of the component with your stylesheet.
QString style = "QMenuBar::item:selected { background: white; } QMenuBar::item:pressed { background: white; }"
menuBar.setStyleSheet(style);

Prevent selected items in unfocused table widget from becoming gray

When I select items in QTableWidget, it looks like this:
But when I focus other widget, it looks like this:
I want the items to remain blue as long as they're selected. I tried to enforce it using QSS (CSS):
QListWidget::item:selected:active, QListWidget::item:selected:!active {
background: blue;
}
QListWidget::item:selected {
background: blue;
}
Didn't help. What can I do to prevent selected items from becoming gray?
Turns out that background: is not the correct property to change selection background. This is correct:
QTableView::item:selected:!active
{
/*selection-background-color: #3399ff;*/
selection-background-color: #93CAFF;
/** doesnt work **/
color: white;
}
The text color setting still doesn't work, but it's better than nothing.

How to change right-arrow image in Qt's QMenu for selected items with a CSS stylesheet?

I have a Qt QMenu in my app, consisting of two levels (the top level of submenus, then each submenu containing actions), and we have a custom dark-grey style whereby the menu background is grey, the text color is white, and the right arrow is white. When a submenu item is highlighted (mouse-over), the item background is white, the text is black, and I want the right arrow to switch to a black image as well. I'm using a CSS stylesheet to do this. However, I can't seem to find the right syntax to set an alternate right-arrow image for the item selected state. My CSS looks like this:
QMenu
{
background-color: rgb( 24, 24, 24 );
color: white;
}
QMenu::item:selected
{
background-color: white;
color: black;
}
QMenu::right-arrow
{
image: url(Resources/MenuRight.png);
}
I've tried the following additions after the above code (where MenuRightSelected.png is an inverted-color image of MenuRight.png):
QMenu::right-arrow:selected
{
image: url(Resources/MenuRightSelected.png);
}
and
QMenu::item::right-arrow:selected
{
image: url(Resources/MenuRightSelected.png);
}
Neither of these affect the displayed QMenu. Does anyone know if it is possible to do what I'm after, and if so, how?
Possibly you only have to change the order of the items in your css file. I once heard that Qt parses the css files from upwards. Items further up overwrite the behaviour of items further down.