Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QListWidget.setStyleSheet



  • Each item in my ListWidget has different colored text on a white background. When selecting an item, I'd like to preserve the text color and indicate selection with a border or with a different color background. Everything I try sets the text color black for the selected item. Any suggestions?
    Thanks!



  • @jschwartzman
    You should show whatever you tried? You need to get down to the QListWidgetItem level. And that is not a QWidget, so you cannot set stylesheet on it directly, only via QListWidget::item etc. See if https://stackoverflow.com/questions/32311927/qlistwidgetsetstylesheet-and-qlistwidgetitemsetbackgroundcolor-relation gives you an idea how others tackle this?



  • This is what I've tried:
    self.listWidgetRepo.setStyleSheet("""
    QlistWidget::item:selected { background: transparent; }
    QListWidget::item:selected { border: 1px solid red; }
    """)

    It paints the border, but renders the text foreground color black. If I change it to:
    self.listWidgetRepo.setStyleSheet("""
    QListWidget::item:selected { foreground: green;
    QListWidget::item:selected { background: transparent; }
    QListWidget::item:selected { border: 1px solid red; }
    """)

    The selected text foreground color is still black.

    Each item foreground color has a specific meaning and I'd like to preserve the foreground color while the item is selected.

    I looked at the example code you provided but couldn't understand how it related to the selected state of the QListWidget.
    Thanks.



  • @jschwartzman

    QListWidget::item:selected { foreground: green;

    You are missing the }.


  • Moderators

    @jschwartzman

    to add to @JonB

    QlistWidget::item:selected { background: transparent; }

    You wrote QlistWidget instead of QListWidget, makes a difference!



  • @jschwartzman
    To add to posts from myself & @J-Hilk

    { foreground: ...

    Could you clarify where you got foreground from as an attribute/property to change text color? It's not on https://doc.qt.io/qt-5/stylesheet-reference.html. You didn't just type it in without verifying it was correct, then find it didn't work and were surprised, did you? There is a property named color for setting text color, as per HTML, have you tried that?

    And importantly, what about selection-color (& selection-background-color) which you see there:

    The foreground of selected text or items.
    This property is supported by all widgets that respect the QWidget::palette and that show selection text.

    Have you investigated that?



  • This works, but it's not what a want (I changed from a QListWidget to a QListView, but I'm not sure I needed to):

        self.listViewRepo.setStyleSheet("""
        QListView::item:selected { color: blue; }
        QListView::item:selected { background-color: white; }
        QListView::item:selected { border: 1px solid red; }
        """)
    

    This gives me a selected row with the text rendered in blue on a white background.
    What I want to know is how do I keep the same selected text foreground color that I set when I populated the list. I tried using self.listViewRepo.setProperty("textColor", color) when I populated the list, but I don't know how to access this property when the selection changes. And I don't know how to put it in the style sheet.
    Any suggestions?
    Thanks.



  • @jschwartzman In other words, I want the selected text foreground color in my QListView to be a variable. It doesn't seem that I can do that with setStyleSheet. Can anyone point me in the right direction?
    Thanks.



  • @jschwartzman

    • When the selection changes you get a signal. For, say, a QListView you need to look at self.listViewRepo.selectionModel().currentChanged signal. This means using https://doc.qt.io/qt-5/qitemselectionmodel.html.

    • Assuming the setProperty("textColor", color) works (I don't know if it does), then you just have to specify the correct desired color and you have it working as a variable.

    • If you want to do it via a stylesheet, in the string passed to self.listViewRepo.setStyleSheet you need to alter the QListView::item:selected { color: blue; } fragment in the string to output the desired color in-line, something like:

    """
    ...
    QListView::item:selected { color: """ + color + """; }
    ...
    """
    


  • That did it. Many thanks!


Log in to reply