1. QComboBox {
  2.   border: 1px solid #bebebe;
  3.   padding: 1px 18px 1px 3px;
  4.   font: normal normal 16px "Microsoft YaHei";
  5.   color: #555555;
  6.   background: transparent;
  7. }
  10. QComboBox:editable{
  11.   background: transparent;
  12. }
  14. QComboBox:!editable, QComboBox::drop-down:editable{
  15.   background: transparent;
  16. }
  18. QComboBox:!editable:on, QComboBox::drop-down:editable:on{
  19.   background: transparent;
  20. }
  22. QComboBox:!on{
  23. }
  25. QComboBox:on{ /* the popup opens */
  26.   color: #555555;
  27.   border-color: #327cc0;
  28.   background: transparent;
  29. }
  31. QComboBox::drop-down{
  32.   subcontrol-origin: padding;
  33.   subcontrol-position: top right;
  34.   width: 20px;
  35.   border-left-width: 1px;
  36.   border-left-color: darkgray;
  37. }
  39. QComboBox::down-arrow {
  40.   image: url(:/common/combobox_arrow);
  41. }
  43. QComboBox::down-arrow:on {
  44.   image: url(:/common/combobox_arrow_up);
  45. }
  47. QComboBox QAbstractItemView {
  48.   outline: 0; 
  49.   border: 1px solid #327cc0;
  50.   background-color: #F1F3F3;
  51.   font: normal normal 14px "Microsoft YaHei";
  52. }
  54. QComboBox QAbstractItemView::item {
  55.   height: 32px;
  56.   color: #555555;
  57.   background-color: transparent;
  58. }
  60. QComboBox QAbstractItemView::item:hover {
  61.   color: #FFFFFF;
  62.   background-color: #327cc0;
  63. }
  65. QComboBox QAbstractItemView::item:selected {
  66.   color: #FFFFFF;
  67.   background-color: #327cc0;
  68. }
  70. QComboBox QAbstractScrollArea QScrollBar:vertical {
  71.   background-color: #d0d2d4;
  72. }
  74. QComboBox QAbstractScrollArea QScrollBar::handle:vertical {
  75.   background: rgb(160,160,160);
  76. }
  78. QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover {
  79.   background: rgb(90, 91, 93);
  80. }

使用需要注意的点

  1. QCombox *box = new QComboBox();
  2. // 只有调用了setView(new QListView()), qss才能生效, 这是Qt的一个bug
  3. box->setView(new QListView());

效果

效果.gif