[QT] QSS美容入力ウィジェット&&表示ウィジェット

ディレクトリ

 

1、QComboBox

2、QLineEdit

3、QTextEdit

4、QSpinBox（同QDoubleSpinBox、QTimeEdit、QDateTimeEdit）

5. QScrollBar（水平および垂直）

 6、QSlider（水平および垂直）

 7、QLabel

  8、QProgressBar

---

1、QComboBox

            

QComboBox {
	border: 1px solid #bebebe;
	padding: 1px 18px 1px 3px;
	font: normal normal 16px "Microsoft YaHei";
	color: #555555;
	background: transparent;
}
 
 
QComboBox:editable{
	background: transparent;
}
 
QComboBox:!editable, QComboBox::drop-down:editable{
	background: transparent;
}
 
QComboBox:!editable:on, QComboBox::drop-down:editable:on{
	background: transparent;
}
 
QComboBox:!on{
}
 
QComboBox:on{ /* the popup opens */
	color: #555555;
	border-color: #327cc0;
	background: transparent;
}
 
QComboBox::drop-down{
    subcontrol-origin: padding;
    subcontrol-position: top right;
    width: 20px;
    border-left-width: 1px;
    border-left-color: darkgray;
}
/*右边图标*/
QComboBox::down-arrow {
	image: url(:/new/prefix1/ims/add_bottom.png);
}
 
QComboBox::down-arrow:on {
	image: url(:/new/prefix1/ims/add_top.png);
}
 
QComboBox QAbstractItemView {
	outline: 0; 
	border: 1px solid #327cc0;
	background-color: #F1F3F3;
	font: normal normal 14px "Microsoft YaHei";
}
 
QComboBox QAbstractItemView::item {
	height: 32px;
	color: #555555;
	background-color: transparent;
}
 
QComboBox QAbstractItemView::item:hover {
	color: #FFFFFF;
	background-color: #327cc0;
}
 
QComboBox QAbstractItemView::item:selected {
	color: #FFFFFF;
	background-color: #327cc0;
}
 
QComboBox QAbstractScrollArea QScrollBar:vertical {
	background-color: #d0d2d4;
}
 
QComboBox QAbstractScrollArea QScrollBar::handle:vertical {
	background: rgb(160,160,160);
}
 
QComboBox QAbstractScrollArea QScrollBar::handle:vertical:hover {
	background: rgb(90, 91, 93);
}

2、QLineEdit

         

        リファレンス：https : //www.cnblogs.com/csuftzzk/p/qss_lineedit_completer.html

3、QTextEdit

        

QTextEdit {
        border: 1px solid rgb(45, 45, 45);
        color: white;
	border-image: url(:/new/prefix1/ims/p6.jpg);
	/*background-attachment: scroll;*/
	background-attachment: fixed;
}

4、QSpinBox（同QDoubleSpinBox 、QTimeEdit、QDateTimeEdit）

         

         

/*抬起样式*/
/*向上按钮  向右*/
QTimeEdit::up-button,
QDoubleSpinBox::up-button,
QSpinBox::up-button,
QDateTimeEdit::up-button
{	
	subcontrol-origin:border;
    subcontrol-position:right;
	image: url(:/new/prefix1/ims/right.png);
    width: 24px;  /*图标大小*/
    height: 40px;       
}
/*向下按钮 向左*/
QTimeEdit::down-button,
QDoubleSpinBox::down-button,
QSpinBox::down-button,
QDateTimeEdit::down-button 
{
	subcontrol-origin:border;
    subcontrol-position:left;
	image: url(:/new/prefix1/ims/left.png);
    width: 24px;
    height: 40px;
}
/*按钮按下样式*/
QTimeEdit::up-button:pressed,
QDoubleSpinBox::up-button:pressed,
QSpinBox::up-button:pressed,
QDateTimeEdit::up-button:pressed
{
	subcontrol-origin:border;
    subcontrol-position:right;
    image: url(:/new/prefix1/ims/right_push.png);
    width: 24px;
    height: 40px;     
}
  
QTimeEdit::down-button:pressed,
QDoubleSpinBox::down-button:pressed,
QSpinBox::down-button:pressed,
QSpinBox::down-button:pressed,
QDateTimeEdit::down-button:pressed
{
    subcontrol-position:left;
	image: url(:/new/prefix1/ims/left_push.png);
    width: 24px;
    height: 40px;
}

5.  QScrollBar（水平および垂直）

 

          

水平样式1
QScrollBar:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    height: 15px;
    margin: 0px 20px 0 20px;
}
QScrollBar::handle:horizontal {
    background: white;
    min-width: 20px;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}
QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    border: 2px solid grey;
    width: 3px;
    height: 3px;
    background: white;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

水平样式2
QScrollBar:horizontal {
    border: 2px solid green;
    background: cyan;
    height: 15px;
    margin: 0px 40px 0 0px;
}

QScrollBar::handle:horizontal {
    background: gray;
    min-width: 20px;
}

QScrollBar::add-line:horizontal {
    background: blue;
    width: 16px;
    subcontrol-position: right;
    subcontrol-origin: margin;
    border: 2px solid black;
}

QScrollBar::sub-line:horizontal {
    background: magenta;
    width: 16px;
    subcontrol-position: top right;
    subcontrol-origin: margin;
    border: 2px solid black;
    position: absolute;
    right: 20px;
}

QScrollBar:left-arrow:horizontal, QScrollBar::right-arrow:horizontal {
    width: 3px;
    height: 3px;
    background: pink;
}

QScrollBar::add-page:horizontal, QScrollBar::sub-page:horizontal {
    background: none;
}

 

垂直样式 
QScrollBar:vertical {
     border: 2px solid grey;
     background: #32CC99;
     width: 15px;
     margin: 22px 0 22px 0;
 }
 QScrollBar::handle:vertical {
     background: white;
     min-height: 20px;
 }
 QScrollBar::add-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: bottom;
     subcontrol-origin: margin;
 }

 QScrollBar::sub-line:vertical {
     border: 2px solid grey;
     background: #32CC99;
     height: 20px;
     subcontrol-position: top;
     subcontrol-origin: margin;
 }
 QScrollBar::up-arrow:vertical, QScrollBar::down-arrow:vertical {
     border: 2px solid grey;
     width: 3px;
     height: 3px;
     background: white;
 }

 QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {
     background: none;
 }

 6、QSlider（水平および垂直）

 

水平
QSlider::groove:horizontal {
    border: 1px solid #999999;
    height: 8px; /* 默认情况下凹槽会扩展到滑块的大小。通过给它一个高度，它有一个固定的大小 */
    background: qlineargradient(x1:0, y1:0, x2:0, y2:1, stop:0 #B1B1B1, stop:1 #c4c4c4);
    margin: 2px 0;
}

QSlider::handle:horizontal {
    background: qlineargradient(x1:0, y1:0, x2:1, y2:1, stop:0 #b4b4b4, stop:1 #8f8f8f);
    border: 1px solid #5c5c5c;
    width: 18px;
    margin: -2px 0;     border-radius: 3px;
}

 

垂直
QSlider::groove:vertical {
    background: red;
    position: absolute; 
    left: 4px; right: 4px;
}

QSlider::handle:vertical {
    height: 10px;
    background: green;
    margin: 0 -4px; /* expand outside the groove */
}

QSlider::add-page:vertical {
    background: white;
}

QSlider::sub-page:vertical {
    background: pink;
}

 7、QLabel

QLabel
{ 
	border: 2px solid green;
 	border-radius: 4px; 
	padding: 2px; 
	background-image: url(:/new/prefix1/ims/p6.jpg);
}

  8、QProgressBar

リファレンス：https : //blog.csdn.net/fanyun_01/article/details/78866769

 

完成する！