Qt QComboBox QSS样式设置

QComboBox 样式表可谓太丰富了，研究了一阵，总结出的记录。

QComboBox整体样式

/* 未下拉时，QComboBox的样式 */
QComboBox {
    border-radius: 3px;
    padding: 1px 18px 1px 3px;
    background: transparent; 
    border: 1px solid gray; 
	color: #333333;
	border-color: #E5E5E5;
	background-color: #FFFFFF;
}
/* 点击QComboBox后的已选中项的样式 */
QComboBox:on {
    color: rgb(33, 188, 188);
    background-color: #f1ee04;
}

设置QComboBox展开区的样式

/* 下拉展开后，整个下拉窗体样式 */
QComboBox QAbstractItemView {
    outline: 1px solid #000000;/*选中项外边框*/
    border: 1px solid yellow;/* 整个下拉窗体的边框 */
    color: #d34b4b;
    background-color: #FFFFFF; /* 整个下拉窗体的背景色 */
    selection-color: #3377FF;/*下拉框选中项字体颜色*/
    selection-background-color:#FFFFFF;/* 下拉框选中项的背景色 */
}

QComboBox 箭头样式

/* 下拉框箭头样式 */
QComboBox::drop-down {
    subcontrol-origin: padding;/* 子控件在父元素中的原点矩形。如果未指定此属性，则默认为padding。 */
    subcontrol-position: top right;/* 下拉框的位置（右上） */
    width: 15px;/* 下拉框的宽度 */
    border-left-width: 1px;/* 下拉框的左边界线宽度 */
    border-left-color: darkgray;/* 下拉框的左边界线颜色 */
    border-left-style: solid; /* 下拉框的左边界线为实线 */
    border-top-right-radius: 3px;/* 下拉框的右上边界线的圆角半径（应和整个QComboBox右上边界线的圆角半径一致） */
    border-bottom-right-radius: 3px; /* 同上 */
    background: #333333;
}

/* 悬浮在下拉箭头时样式 */
QComboBox::drop-down:hover {
    background: #3cff59;
}

/* 下拉箭头样式 */
QComboBox::down-arrow {
    width: 15px;/* 下拉箭头的宽度（建议与下拉框drop-down的宽度一致） */
    background: transparent;/* 下拉箭头的的背景色 */
    padding: 0px 0px 0px 0px;/* 上内边距、右内边距、下内边距、左内边距 */
    image: url(:/images/combobox_arrow_down.png);
}

/* 点击下拉箭头样式 */
QComboBox::down-arrow:on {
    image: url(:/images/combobox_arrow_up.png);/* 显示上拉箭头 */
}

QComboBox 垂直滚动条样式

/* QComboBox中的垂直滚动条 */
QComboBox QAbstractScrollArea QScrollBar:vertical {
    width: 10px;
    background-color: #f1ee04; /* 空白区域的背景色*/
}

/* 垂直滚动条的手柄（滑块） */
QComboBox QAbstractScrollArea QScrollBar::handle:vertical {
    border-radius: 5px; /* 圆角 */
    background: rgb(6, 68, 20);/* 小方块的背景色 */
}

/* 垂直滚动条的手柄（滑块）悬浮时样式 */
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover {
    background: rgb(9, 75, 208);/* 悬浮小方块的背景色 */
}

QComboBox 细化调整

主要区分为可编辑状态和不可编辑状态的细化样式调整，部分会与总体样式冲突，细节样式优先。

/* 属性设置为可编辑（setEditable(true)）editable时，文字编辑区域的样式 */
QComboBox:editable {
    background: green;
}

/* 属性设置为非editable时，QComboBox文字区的样式 */
QComboBox:!editable {
    background: #ffffff;
}

/* 属性设置为editable时，展开QComboBox下拉框文字区的样式 */
QComboBox:editable:on {
    background: green;
}

/* 设置为!editable时，展开QComboBox下拉框文字区的样式 */
QComboBox:!editable:on {
    color:white;
    background: green;   
}

/* 属性设置为editable时，下拉框箭头的样式 */
QComboBox::drop-down:editable {
    background: lightblue;
}
/* 属性设置为非editable时，下拉框箭头的样式 */
QComboBox::drop-down:!editable {
    background: green;
}

/* 属性设置为editable时，下拉框展开箭头的样式 */
QComboBox::drop-down:editable:on {
    background: rgb(238, 182, 144);
}

/* 属性设置为非editable时，下拉框展开箭头的样式 */
QComboBox::drop-down:!editable:on {
    background: red;
}