The QComboBox style sheet is too rich. After studying for a while, I summarized the records.
QComboBox overall style
/* 未下拉时,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;
}
Set the style of the QComboBox expansion area
/* 下拉展开后,整个下拉窗体样式 */
QComboBox QAbstractItemView {
outline: 1px solid #000000;/*选中项外边框*/
border: 1px solid yellow;/* 整个下拉窗体的边框 */
color: #d34b4b;
background-color: #FFFFFF; /* 整个下拉窗体的背景色 */
selection-color: #3377FF;/*下拉框选中项字体颜色*/
selection-background-color:#FFFFFF;/* 下拉框选中项的背景色 */
}
QComboBox arrow style
/* 下拉框箭头样式 */
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 vertical scroll bar style
/* 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 fine adjustment
It is mainly divided into detailed style adjustments in the editable state and the non-editable state. Some of them will conflict with the overall style, and the detailed style takes priority.
/* 属性设置为可编辑(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;
}