CODEWITHSUNDEEP
qtqt5qtstylesheets
John Reds
John Reds

Reputation: 137

Is there a way to change the "external" border of a QPushButton?

I'm trying to change the look of the QPushButton of my application to be similar to the PyCharm ones. I almost made it but I would like to change the "external" border of the button on focus.

To better explain myself, two screenshots are posted below: the first shows a PyCharm dialog with the focus on the OK button and the second shows part of a dialog of my application with the focus on the OK button as well.

enter image description here

enter image description here

The buttons are similar but in the first picture the border "grows" outwards while in the second the border "grows" inwards.

Is there a way to change this "property" through the stylesheet?

My stylesheet below:

QPushButton{
    font-family: "Segoe UI";
    font-size: 8pt;
    border: 1px solid;
    border-color: rgb(46, 103, 156); 
    border-radius: 3px; 
    padding-right: 10px; 
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: rgb(77, 138, 201);
    color: white;
    font: bold;
    width: 64px;
}
QPushButton:hover {
    border: 1px solid;
    border-radius: 3px;
    border-color: rgb(33, 77, 115);
}
QPushButton:focus {
    outline-color: transparent;
    border: 2px solid;
    border-color: rgb(151, 195, 243);
}
QPushButton:pressed{
    background-color: rgb(52, 113, 173);
}
QPushButton:disabled {
    color: grey;
    border-color: grey;
    background-color: none;
}

Upvotes: 1

Views: 3110

Answers (1)

musicamante
musicamante

Reputation: 48231

You could set a default margin (which sets the margins between the effective widget rectangle and its drawn contents), and set it to 0 for the focus selector:

QPushButton {
    ...
    margin: 1px;
}
QPushButton:focus {
    ...
    margin: 0px;
}

Upvotes: 1

Related Questions