[FIXED] How to change the Scrollbars Arrow Keys in PyQt5?

Issue

Using the following code to set the style for vertical Qscrollbar. It gives the appearance/result as attached photo. I want to change the up and down arrow from Square to the actual up arrow ( triangle) on top and the down arrow at the bottom(inverse triangle). How to obtain it?

   QScrollBar:vertical {
   background: rgb(220,220,220);
   width: 15px;
   margin: 22px 0 22px 0; }

   QScrollBar::handle:vertical {
   background: rgb(169,169,169);
   min-height: 10px; }
   
   QScrollBar::add-line:vertical {
   border: 0px solid grey;
   background: rgb(220,220,220);
   height: 20px;
   subcontrol-position: bottom;
   subcontrol-origin: margin; }

   QScrollBar::sub-line:vertical {
   border: 0px solid red;
   background: rgb(220,220,220);
   height: 20px;
   subcontrol-position: top;
   subcontrol-origin: margin;}
   
   QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
   border: 0px solid red;
   display: ᐃ
   width: 5px;
   height: 5px;
   background:black;}

Solution

You must use images to get arrow icons.

QScrollBar::right-arrow,
QScrollBar::left-arrow,
QScrollBar::up-arrow,
QScrollBar::down-arrow {
    width: 12px;
    height: 12px;
    background: black;
}

QScrollBar::right-arrow {
    image: url("://icons/theme-dark/caret_right.svg");
}
QScrollBar::left-arrow {
    image: url("://icons/theme-dark/caret_left.svg");
}
QScrollBar::up-arrow {
    image: url("://icons/theme-dark/caret_up.svg");
}
QScrollBar::down-arrow {
    image: url("://icons/theme-dark/caret_down.svg");
}

The images can be anything, in any format Qt supports (png, jpg, gif, etc). The above URL syntax uses images embedded in an included Qt resource file (but they could also be file:// URLs, or actual network requests (http/s, etc)).

You do not need the :vertical or :horizontal qualifiers (the elements are already "directional"). Also the way you're using display is incorrect, and besides Qt doesn't support it anyway (nor content which is I think what you meant).

Answered By - Maxim Paperno