Customize QSpinbox



  • hi,

    i want to customize QSpinbox

    Below is the picture I want.

    0_1540536527617_custom.png

    I think other things are possible by using stylesheet

    but i don't know how to get up-down button.

    i want to solve it through using stylesheet or inherit QSpinbox.

    is there some ideas?



  • Re: Customize QSpinbox

    I got the following results.

    0_1540538549824_custom-1.png

    The right part of the down button does not collapse.. why??

    code is

    QSpinBox {
    padding-right: 15px; /* make room for the arrows */
    border-image: url(:/images/frame.png) 4;
    border-width: 3;
    }

    QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: center right; /* position at the top right corner /
    width: 16px; /
    16 + 2*1px border-width = 15px padding + 3px parent border */
    border-image: url(:/new/prefix1/icon/up_arrow.png) 1;
    border-width: 1px;
    }

    QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: center right ; /* position at bottom right corner */
    width: 16px;
    border-image: url(:/new/prefix1/icon/down_arrow.png) 1;
    border-width: 1px;
    border-top-width: 1;

     padding: -16 12px 0 24px; // part of issue
    

    }



  • I got the following results.

    0_1540540141937_custom-2.png

    code is

    QSpinBox {
    padding-right: 15px; /* make room for the arrows */
    border-color: rgb(0, 0, 0);
    border-width: 3;
    }

    QSpinBox::up-button {
    subcontrol-origin: border;
    subcontrol-position: center right; /* position at the top right corner /
    width: 16px; /
    16 + 2*1px border-width = 15px padding + 3px parent border */
    border-image: url(:/new/prefix1/icon/up_arrow_disabled.png);
    border-width: 1px;
    }

    QSpinBox::down-button {
    subcontrol-origin: border;
    subcontrol-position: center right ; /* position at bottom right corner */
    width: 16px;
    border-image: url(:/new/prefix1/icon/down_arrow_disabled.png) 1;
    border-width: 1px;
    border-top-width: 1;

     border-right-width:20;	
    

    }


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.