先來個簡單的示例
QComboBox {
font-family: "Microsoft YaHei";
font-size: 14px;
color: #000000;
font-style: italic;
font-weight: bold;
}
效果圖如下
其中：
font-family 為設置字體類型，標準形式需要加雙引號，不加也可能會生效，具體看系統(tǒng)是否支持，中英文都支持，但要保證字體編碼支持，一般程序編碼為"utf-8"時沒問題。
font-size 為設置字體大小，單位一般使用 px 像素
font-style 為設置字體斜體，italic 為斜體， normal 為不斜體
font-weight 為設置字體加粗，bold 為加粗， normal 為不加粗
color 為設置字體顏色，可以使用十六進制數(shù)表示顏色，也可以使用某些特殊的字體顏色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來設置，其中 r、g、b、a 值為0~255，如果想不顯示顏色可以設置值為透明 transparent
注意：字體顏色用的是 color 屬性，沒有 font-color 這個屬性的
對于字體樣式，可以把 family size style weight 統(tǒng)一設置在 font 屬性中：
font: bold italic 18px "Microsoft YaHei";
這里出現(xiàn)的順序要求是 style 和 weight 必須出現(xiàn)在開頭，size 和 family 在后面，而且 size 必須在 family 之前，否則樣式將不生效，font 中不能設置顏色，可以單獨設置 style weight 和 size，不能單獨設置 family
文字位置
padding-left: 10px;
padding-top: 8px;
padding-right: 7px;
padding-bottom: 9px;
padding-left 為設置按鈕(包括選擇框和文字)距離左邊邊界的距離
padding-top 為設置按鈕(包括選擇框和文字)距離頂邊邊界的距離
padding-right 為設置按鈕(包括選擇框和文字)距離右邊邊界的距離
padding-bottom 為設置按鈕(包括選擇框和文字)距離底邊邊界的距離
Tip: 在 qss 中，屬性 text-align 對 QComboBox 是不起作用的，一般 padding-left 相當于 x 坐標，padding-top 相當于 y 坐標，設置這兩個就可以精確地調節(jié)文字的顯示位置
下面我們調節(jié)字體左間距為 30px
QComboBox {
font-family: "Microsoft YaHei";
font-size: 14px;
color: #000000;
font-style: italic;
font-weight: bold;
padding-left: 30px;
}
邊框樣式
border-style: solid;
border-width: 2px;
border-color: aqua;
border-style 為設置邊框樣式，solid 為實線， dashed 為虛線， dotted 為點線， none 為不顯示（如果不設置 border-style 的話，默認會設置為 none）
border-width 為設置邊框寬度，單位為 px 像素
border-color 為設置邊框顏色，可以使用十六進制數(shù)表示顏色，也可以使用某些特殊的字體顏色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來設置，其中 r、g、b、a 值為0~255，如果想不顯示顏色可以設置值為透明 transparent
示例如下
QComboBox {
font-family: "Microsoft YaHei";
font-size: 14px;
color: #000000;
font-style: italic;
font-weight: bold;
padding-left: 30px;
border-width: 2px;
border-style: solid;
border-color: aqua;
}
我們也可以把 border 的 width style color 一起設置在 border 屬性中：
border: 2px solid aqua;
但必須注意的是，值的順序必須是按照 width style color 來寫，不然不會生效！如果不想顯示邊框可以直接設置 border 屬性值為 none
也可以單獨設置某一條邊框的樣式
border-top-style: solid; border-top-width: 2px; border-top-color: red; border-top: 2px solid red; border-right-style: solid; border-right-width: 3px; border-right-color: green; border-right: 3px solid green; border-bottom-style: solid; border-bottom-width: 2px; border-bottom-color: blue; border-bottom: 2px solid blue; border-left-style: solid; border-left-width: 3px; border-left-color: aqua; border-left: 3px solid aqua;
border-top-style 為設置頂部邊框樣式
border-top-width 為設置頂部邊框寬度
border-top-color 為設置頂部邊框顏色
border-top 為設置頂部邊框 width style color 的屬性，原理和 border 一致
其它三個邊框：right bottom left 邊框的設置都相同
設置邊框半徑
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border-radius: 20px;
border-top-left-radius 為設置左上角圓角半徑，單位 px 像素
border-top-right-radius 為設置右上角圓角半徑，單位 px 像素
border-bottom-left-radius 為設置左下角圓角半徑，單位 px 像素
border-bottom-right-radius 為設置右上角圓角半徑，單位 px 像素
border-radius 為設置所有邊框圓角半徑，單位為 px 像素，通過圓角半徑可以實現(xiàn)圓形的 QComboBox
下面我們來設置左上角和左下角半徑
QComboBox { font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: italic; font-weight: bold; padding-left: 30px; border-width: 2px; border-style: solid; border-color: aqua; border-top-left-radius: 13px; border-bottom-left-radius: 13px; }
背景樣式
background-color: #2E3648;
background-image: url("./image.png");
background-repeat: no-repeat;
background-position: left center;
background: url("./image.png") no-repeat left center #2E3648;
background-color 為設置背景顏色，可以使用十六進制數(shù)表示顏色，也可以使用某些特殊的字體顏色：red, green, blue 等，或者使用 rgb(r,g,b) 和 rgba(r,g,b,a) 來設置，其中 r、g、b、a 值為0~255，如果想不顯示顏色可以設置值為透明 transparent
background-image 為設置背景圖片，圖片路徑為 url(image-path)
background-repeat 為設置背景圖是否重復填充背景，如果背景圖片尺寸小于背景實際大小的話，默認會自動重復填充圖片，可以設置為 no-repeat 不重復，repeat-x 在x軸重復，repeat-y 在y軸重復
background-position 為設置背景圖片顯示位置，只支持 left right top bottom center；值 left right center 為設置水平位置，值 top bottom center 為設置垂直位置
比如我們給QComboBox左邊添加一個背景圖片
QComboBox { font-family: "Microsoft YaHei"; font-size: 14px; color: #BDC8E2; font-style: italic; font-weight: bold; padding-left: 30px; border-width: 1px; border-style: solid; border-color: aqua; background-color: #2E3648; background-image: url("./image.png"); background-repeat: no-repeat; background-position: left center; }
background: url("./image.png") no-repeat left center #2E3648;
color image repeat position 這些屬性值出現(xiàn)的順序可以任意
接下來，我們對 QComboBox 進行動態(tài)樣式設置
可以設置鼠標懸浮時的樣式
QComboBox:hover {
color: green;
background-color: black;
}
當下拉列表顯示出來時的樣式
QComboBox:on {
color: red;
background-color: black;
}
當下拉框按鈕可編輯輸入文字時的樣式
QComboBox:editable {
color: white;
background-color: #2E3648;
}
想要可編輯樣式生效需要設置下拉框按鈕為可編輯，比如調用 setEditable() 方法，值得注意的是，一旦可編輯樣式生效，其它類似于 hover、on 所設置的樣式都會被覆蓋掉，除非再次設置為不可編輯
接下來我們討論下拉框按鈕右邊的下拉圖標
下拉圖標屬于下拉框按鈕的一個子控件 drop-down，而 drop-down 中又包含 down-arrow 子控件，我們用樣式表把這兩個控件顯示出來：
QComboBox { font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: normal; font-weight: bold; } QComboBox::drop-down { border: 1px solid red; } QComboBox::down-arrow { border: 1px solid green; }
在樣式表中，我們設置 drop-down 邊框顏色為紅色，down-arrow 邊框為綠色，顯示效果如上圖。我們也可以自定義 drop-down 控件的大小和位置：
QComboBox { font-family: "Microsoft YaHei"; font-size: 14px; color: #000000; font-style: normal; font-weight: bold; padding-left: 6px; } QComboBox::drop-down { width:28px; height:22px; border: 1px solid red; subcontrol-position: center top; subcontrol-origin: padding; } QComboBox::down-arrow { border: 1px solid green; }
width 和 height 設置 drop-down 的寬高
subcontrol-position 設置 drop-down 的位置，只支持 left right top bottom center；值 left right center 為設置水平位置，值 top bottom center 為設置垂直位置
subcontrol-origin 設置 drop-down 的對齊方式，一般設置為 padding
注意: 如果想要自定義的 width、height、subcontrol-position 生效，必須在 QComboBox 按鈕中設置 padding 的值，哪怕設置值為0，否則無法生效！
當然，我們也可以設置 drop-down 的圓角半徑 border-radius，屬性值和其它控件樣式的設置方式一樣：
border-top-left-radius: 6px;
border-top-right-radius: 6px;
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-radius: 6px;
同時，我們還可以往 drop-down 添加圖片，方式有兩種：
image: url("./arrow_down.png");
background-image: url("./arrow_down.png");
image 設置唯一的自動適應不重復的圖片，而 background-image 則需要手動調節(jié)它的 repeat, position 屬性值。這里，我們不推薦在 drop-down 中設置圖片，因為它有一個更好放圖片的控件 down-arrow
down-arrow
（由于最近比較忙，后續(xù)有空再補充完整?。?/font>
聯(lián)系客服
