Qt Change stylesheet on focus in/out event

2.3k Views Asked by At

Okay I'm feeling really stupid right now... I have a QTableWidget and when it has focus I want to change the stylesheet so that it's border "highlights". I can do this simply by subclassing the widget's focusInEvent however if I call setStyleSheet() it overrides all styling that I did before. In the name of cleanliness I'm trying to find the best way to ONLY change the border color without overriding my other styling.

As a note I'm trying to find the best way to do this for all properties. In this case I need border-color, but I imagine I'll want to change other things as well in the future.

Simple example in PyQt4:

class MyTableWidget(QtGui.QTableWidget):
    def __init__(self):
        super(MyTableWidget, self).__init__()
        self.style = "QTableView {background: red; selection-background-color: green; border: 1px solid gray}" # beautiful, I know...
        self.setStyleSheet(self.style)

    def focusInEvent(self, event):
        super(MyTableWidget, self).focusInEvent(event)
        self.setStyleSheet("border-color: blue")

    def focusOutEvent(self, event):
        super(MyTableWidget, self).focusOutEvent(event)
        self.setStyleSheet(self.style)
3

There are 3 best solutions below

1
On BEST ANSWER

Just had to do something similar and found QTableView::focus give this a try :)

class MyTableWidget(QtWidgets.QTableWidget):
    def __init__(self):
        super(MyTableWidget, self).__init__()
        self.style = """
            QTableView {
                background: red;
                selection-background-color: green;
                border: 1px solid gray;}
            QTableView::focus {border-color: blue;}"""
        self.setStyleSheet(self.style)

Thanks, Mark

0
On

Here is the complete example which also allows optional parameters to be configured on the create of the table. Oh, I've gone with a different set of colours.

Example

 self.tbl_XX = MyTableWidget(contextMenuPolicy=Qt.ContextMenuPolicy.CustomContextMenu)

Here is the class '' class MyTableWidget(QTableWidget):

# Style Sheet Reference
# Table Stylesheet: https://doc.qt.io/qt-5/stylesheet-reference.html
# Colours: https://www.w3.org/wiki/CSS/Properties/color/keywords

def __init__(self, *args, **kwargs):
    super(MyTableWidget, self).__init__(*args, **kwargs)
#def __init__(self, contextMenuPolicy=None):
#    super(MyTableWidget, self ).__init__()
    self.Mystyle = """
        QTableView {                                                                                                   
            selection-background-color: coral;                                                                         
            selection-color: white;                                                                         
            background: white;                                                                                           
            border: 1px solid gray;                                                                                    
            }    
                                                                                                                      
        QTableView::item:hover:selected {                                                                              
            background: blue;                                                                                         
            border: 1px solid blue;                                                                                    
            }    
                                   
        QTableView::focus {
            border-color: red;
            } 
                                                                                           
        QTableView::item:hover:!selected {                                                                             
            background: yellow;                                                                                           
            border: 1px solid blue;                                                                                    
            }             
        """
    self.setStyleSheet(self.Mystyle)

def focusInEvent(self, event):
    super(MyTableWidget, self).focusInEvent(event)
    self.setStyleSheet(self.Mystyle) # "border-color: yellow")

def focusOutEvent(self, event):
    super(MyTableWidget, self).focusOutEvent(event)
    self.setStyleSheet(self.Mystyle)
2
On

You can specify different stylesheet parts for hovered and selected/deselected states:

    self.setStyleSheet(                                                                                           
        """                                                                                                            
        QTableView {                                                                                                   
            selection-background-color: green;                                                                         
            background: red;                                                                                           
            border: 1px solid gray;                                                                                    
        }                                                                                                              
        QTableView::item:hover:selected {                                                                              
            background: green;                                                                                         
            border: 1px solid blue;                                                                                    
        }                                                                                                              
        QTableView::item:hover:!selected {                                                                             
            background: red;                                                                                           
            border: 1px solid blue;                                                                                    
        }                                                                                                              
        """)

With this stylesheet you don't need to implement focusInEvent and focusOutEvent at all, Qt's stylesheet engine will handle things for you.