to sum up
QTextEdit setting the background color to be transparent is invalid
Calling background: transparent; directly is invalid. Need to add border:none;
Basic state
State use : (single colon) to distinguish each state
- hover the state when the mouse is over
- pressed mouse pressed state
QSlider
//水平方向
QSlider::groove:horizontal {
border: 1px solid #4A708B;
background: #C0C0C0;
height: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
}
QSlider::sub-page:horizontal {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 #B1B1B1, stop:1 #c4c4c4);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
stop: 0 #5DCCFF, stop: 1 #1874CD);
border: 1px solid #4A708B;
height: 10px;
border-radius: 2px;
}
QSlider::add-page:horizontal {
background: #575757;
border: 0px solid #777;
height: 10px;
border-radius: 2px;
}
QSlider::handle:horizontal
{
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5,
stop:0.6 #45ADED, stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
margin-top: -3px;
margin-bottom: -3px;
border-radius: 5px;
}
QSlider::handle:horizontal:hover {
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #2A8BDA,
stop:0.778409 rgba(255, 255, 255, 255));
width: 11px;
margin-top: -3px;
margin-bottom: -3px;
border-radius: 5px;
}
QSlider::sub-page:horizontal:disabled {
background: #00009C;
border-color: #999;
}
QSlider::add-page:horizontal:disabled {
background: #eee;
border-color: #999;
}
QSlider::handle:horizontal:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}
QScrollBar
QScrollBar:vertical/*垂直滚动条整个区域*/
{
padding:8px 0px 8px 0px;/*预留出的上下两个按钮的空间*/
background-color:red;
min-width:10px;
max-width:10px;
}
QScrollBar::handle:vertical/*垂直滚动条 中间滑块*/
{
min-width:10px;
max-width:10px;
background-color:yellow;
}
QScrollBar::add-line:vertical/*滑块下方点击按钮*/
{
min-height:20px;
max-height:20px;
background-color:rgb(0,255,255);
}
QScrollBar::sub-line:vertical/*滑块上方点击按钮*/
{
min-height:20px;
max-height:20px;
background-color:rgb(0,255,255);
}
QScrollBar::add-page:vertical/*滑块下方按钮到滑块下方区域*/
{
min-height:20px;
max-height:20px;
background-color:rgb(0,255,0);
}
QScrollBar::sub-page:vertical/*滑块上方按钮到滑块上方区域*/
{
min-height:20px;
max-height:20px;
background-color:rgb(0,255,255);
}
//垂直方向
QSlider::groove:vertical {
border: 1px solid #4A708B;
background: #C0C0C0;
width: 5px;
border-radius: 1px;
padding-left:-1px;
padding-right:-1px;
padding-top:-1px;
padding-bottom:-1px;
}
QSlider::sub-page:vertical {
background: #575757;
border: 1px solid #4A708B;
border-radius: 2px;
}
QSlider::add-page:vertical {
background: qlineargradient(x1:0, y1:0, x2:0, y2:1,
stop:0 #c4c4c4, stop:1 #B1B1B1);
background: qlineargradient(x1: 0, y1: 0.2, x2: 1, y2: 1,
stop: 0 #5DCCFF, stop: 1 #1874CD);
border: 0px solid #777;
width: 10px;
border-radius: 2px;
}
QSlider::handle:vertical
{
background: qradialgradient(spread:pad, cx:0.5, cy:0.5, radius:0.5, fx:0.5, fy:0.5, stop:0.6 #45ADED,
<span> </span>stop:0.778409 rgba(255, 255, 255, 255));
height: 11px;
margin-left: -3px;
margin-right: -3px;
border-radius: 5px;
}
QSlider::sub-page:vertical:disabled {
background: #00009C;
border-color: #999;
}
QSlider::add-page:vertical:disabled {
background: #eee;
border-color: #999;
}
QSlider::handle:vertical:disabled {
background: #eee;
border: 1px solid #aaa;
border-radius: 4px;
}
QCheckBox
QCheckBox::indicator /*QCheckBox可勾选区域*/
{
width:20px;
height:16px;
}
QCheckBox::indicator:checked /*QCheckBox勾选*/
{
border-image:url(image/selected.png);
}
QCheckBox::indicator:unchecked /*QCheckBox未勾选*/
{
border-image:url(image/unSelect.png);
}
QCheckBox::indicator:indeterminate /*QCheckBox半勾选*/
{
background-color:red;
}
QScrollBar:horizontal
{
padding:0px 8px 0px 8px;
background-color:red;
min-height:10px;
max-height:10px;
}
QScrollBar::handle:horizontal
{
min-height:10px;
max-height:10px;
background-color:rgb(152,152,1);
}
QScrollBar::add-line:horizontal
{
min-width:20px;
max-width:20px;
background-color:rgb(255,0,0);
}
QScrollBar::sub-line:horizontal
{
min-width:20px;
max-width:20px;
background-color:rgb(255,0,0);
}
QScrollBar::add-page:horizontal
{
min-height:20px;
max-height:20px;
background-color:rgb(0,255,0);
}
QScrollBar::sub-page:horizontal
{
min-height:20px;
max-height:20px;
background-color:rgb(0,255,255);
}
QComboBox
QTableView
QTableView {
color: white; /*表格内文字颜色*/
gridline-color: black; /*表格内框颜色*/
background-color: rgb(108, 108, 108); /*表格内背景色*/
alternate-background-color: rgb(64, 64, 64);
selection-color: white; /*选中区域的文字颜色*/
selection-background-color: rgb(77, 77, 77); /*选中区域的背景色*/
border: 2px groove gray;
border-radius: 0px;
padding: 2px 4px;
}
QCalendarWidget
QCalendarWidget QTableView
{
color:#ffffff;
alternate-background-color:#3275d4;
background-color:#3275d4;
}
QCalendarWidget QTableView
{
selection-color: yellow;
selection-background-color: rgb(77, 77, 77);
}
QToolButton#qt_calendar_nextmonth
{
background-color:red;
}
QToolButton#qt_calendar_prevmonth
{
background-color:red;
}
QToolButton#qt_calendar_monthbutton
{
background-color:yellow;
}
QToolButton#qt_calendar_yearbutton
{
background-color:rgb(0,255,255);
}
QSpinBox#qt_calendar_yearedit
{
background-color:#3275d4;
color:yellow;
}
QWidget#qt_calendar_navigationbar
{
color:yellow;
background-color:yellow;
}
QSpinBox
QSpinBox::up-button/*右侧上方点击按钮*/
{
}
QSpinBox::down-button/*右侧下方点击按钮*/
{
}
QSpinBox::up-arrow/*右侧上方点击按钮中的小三角区域*/
{
}
QSpinBox::down-arrow/*右侧下方点击按钮中的小三角区域*/
{
}
QTabWidget
QTabBar::tab /*tab页的颜色*/
{
color:red;
background-color:yellow;
}
QTabBar::tab:hover
{
background-color:red;
}
QTabBar::tab:selected/*当前选择的tab页*/
{
background-color:white;
}
QTabWidget:pane /*QTabWidget 中间窗体的背景色*/
{
border:none;
}
QToolButton
QToolButton {
/* all types of tool button */
border: 2px solid #8f8f91;
border-radius: 6px;
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #f6f7fa, stop: 1 #dadbde);
}
QToolButton[popupMode="1"] {
/* only for MenuButtonPopup */
padding-right: 20px; /* make way for the popup button */
}
QToolButton:pressed {
background-color: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,
stop: 0 #dadbde, stop: 1 #f6f7fa);
}
/* the subcontrols below are used only in the MenuButtonPopup mode */
//只对 弹出方式为 MenuButtonPopup 的QToolButton有效
QToolButton::menu-button {
border: 2px solid gray;
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
/* 16px width + 4px for border = 20px allocated above */
width: 16px;
}
QToolButton::menu-arrow {
image: url(downarrow.png);
}
Usage record
The difference between b ackground-image and border-image
background-image will not stretch the picture
border-image will stretch the picture
Notes in QSS
Use // to comment, don’t use // this, otherwise the subsequent style will be invalid**
QLineEdit setting background:transparent; is invalid, maybe it is not set # border property
QLineEdit setting padding-left will enlarge the original size
. The menu setting style in QToolButton is invalid. It
may be that the menu is not used as a child form and cannot be inherited from the parent window. Body style