QT qcombobox QSS style settings

QComboBox Stylesheets are too rich , Studied for a while , Summarized records .

QComboBox Overall style

/*  When not pulled down ,QComboBox The style of  */
QComboBox {
    
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    background: transparent; 
    border: 1px solid gray; 
	color: #333333;
	border-color: #E5E5E5;
	background-color: #FFFFFF;
}
/*  Click on QComboBox The style of the selected item after  */
QComboBox:on {
    
    color: rgb(33, 188, 188);
    background-color: #f1ee04;
}

Set up QComboBox The style of the expansion area

/*  After drop-down expansion , The whole drop-down form style  */
QComboBox QAbstractItemView {
    
    outline: 1px solid #000000;/* Select the outer border of the item */
    border: 1px solid yellow;/*  The border of the whole drop-down form  */
    color: #d34b4b;
    background-color: #FFFFFF; /*  The background color of the whole drop-down form  */
    selection-color: #3377FF;/* The font color of the selected item in the drop-down box */
    selection-background-color:#FFFFFF;/*  The background color of the selected item in the drop-down box  */
}

QComboBox Arrow pattern

/*  Drop down arrow style  */
QComboBox::drop-down {
    
    subcontrol-origin: padding;/*  The origin rectangle of the child control in the parent element . If this property is not specified , The default is padding. */
    subcontrol-position: top right;/*  The position of the drop-down box （ The upper right ） */
    width: 15px;/*  The width of the drop-down box  */
    border-left-width: 1px;/*  The width of the left boundary of the drop-down box  */
    border-left-color: darkgray;/*  The left boundary color of the drop-down box  */
    border-left-style: solid; /*  The left boundary of the drop-down box is a solid line  */
    border-top-right-radius: 3px;/*  The fillet radius of the upper right boundary line of the drop-down box （ Should be consistent with the whole QComboBox The fillet radius of the upper right boundary line is the same ） */
    border-bottom-right-radius: 3px; /*  ditto  */
    background: #333333;
}

/*  Floating in the drop-down arrow style  */
QComboBox::drop-down:hover {
    
    background: #3cff59;
}

/*  Drop down arrow style  */
QComboBox::down-arrow {
    
    width: 15px;/*  The width of the drop-down arrow （ Suggestions and drop-down boxes drop-down Consistent width of ） */
    background: transparent;/*  The background color of the drop-down arrow  */
    padding: 0px 0px 0px 0px;/*  Top inner margin 、 Inside right margin 、 Bottom inside margin 、 Left inner margin  */
    image: url(:/images/combobox_arrow_down.png);
}

/*  Click the drop-down arrow style  */
QComboBox::down-arrow:on {
    
    image: url(:/images/combobox_arrow_up.png);/*  Show pull up arrow  */
}

QComboBox Vertical scroll bar style

/* QComboBox Vertical scroll bar in  */
QComboBox QAbstractScrollArea QScrollBar:vertical {
    
    width: 10px;
    background-color: #f1ee04; /*  The background color of the blank area */
}

/*  Handle of vertical scroll bar （ slider ） */
QComboBox QAbstractScrollArea QScrollBar::handle:vertical {
    
    border-radius: 5px; /*  Round corners  */
    background: rgb(6, 68, 20);/*  The background color of the small square  */
}

/*  Handle of vertical scroll bar （ slider ） Floating style  */
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover {
    
    background: rgb(9, 75, 208);/*  The background color of the floating small square  */
}

QComboBox Refinement adjustment

It is mainly divided into editable and non editable refinement style adjustment , Some will conflict with the overall style , Detail style is preferred .

/*  Property is set to editable （setEditable(true)）editable when , Style of text editing area  */
QComboBox:editable {
    
    background: green;
}

/*  Property set to non editable when ,QComboBox Style of text area  */
QComboBox:!editable {
    
    background: #ffffff;
}

/*  Property is set to editable when , an QComboBox The style of the text area of the drop-down box  */
QComboBox:editable:on {
    
    background: green;
}

/*  Set to !editable when , an QComboBox The style of the text area of the drop-down box  */
QComboBox:!editable:on {
    
    color:white;
    background: green;   
}

/*  Property is set to editable when , The style of the arrow in the drop-down box  */
QComboBox::drop-down:editable {
    
    background: lightblue;
}
/*  Property set to non editable when , The style of the arrow in the drop-down box  */
QComboBox::drop-down:!editable {
    
    background: green;
}

/*  Property is set to editable when , The drop-down box expands the style of the arrow  */
QComboBox::drop-down:editable:on {
    
    background: rgb(238, 182, 144);
}

/*  Property set to non editable when , The drop-down box expands the style of the arrow  */
QComboBox::drop-down:!editable:on {
    
    background: red;
}