当前位置：首页 > news >正文

【Qt】界面优化（三）盒子模型的介绍和使用，给按钮，复选框，单行输入框设置样式

news 2026/5/21 22:16:24

小编个人主页详情<—请点击
小编个人gitee代码仓库<—请点击
Qt系列专栏<—请点击
倘若命中无此运，孤身亦可登昆仑，送给屏幕面前的读者朋友们和小编自己!

前言

【Qt】界面优化（二）类型选择器，类选择器，ID选择器，并集选择器，子控件选择器，伪类选择器的介绍和使用——书接上文详情请点击<——，本文会在上文的基础上进行讲解，所以对上文不了解的读者友友请点击前方的蓝字链接进行学习
本文由小编为大家介绍——【Qt】界面优化（三）盒子模型的介绍和使用，给按钮，复选框，单行输入框设置样式

一、盒子模型

盒子模型的介绍

要进行QSS样式的设置，就需要使用到QSS中的样式属性，而其实QSS中的样式属性是非常多的，非常多的，那么有的读者友友可能会说，那我把QSS中的样式属性全部背下来，这里要注意，这样的做法是不科学，不合理的，因为人总会出错，所以正确的做法是用到了某个样式属性的时候就去Qt Assistant对应的Qt官方文档中去进行查询即可
那么我们在Qt Assistant中搜索Qt Style Sheets Reference，然后点击List Of Properties
如上，就列举了QSS中的全部的样式属性，左侧是样式属性，右侧是这些样式属性在哪些控件中可以进行设置，并且还演示了这些样式属性如何进行使用，这里小编就不过多进行讲解了，读者友友可以根据自己的需要进行QSS中样式属性的学习
那么如上，我们返回Qt Style Sheets Reference中，然后点击List Of Stylable Widgets
此时我们来看List Of Stylable Widgets，其实并不是所有的控件都可以进行设置样式的，有些控件是不支持设置样式的，那么在List Of Stylable Widgets中就把哪些控件可以设置哪些样式给列举了出来，对于上图的左侧是都有哪些控件可以设置样式，对于上图的右侧是这些可以设置样式的控件可以设置哪些样式，这里我们关注的主角是样式中box model，我们看到对于右侧的这些样式中有很多的box model，那么究竟该如何理解这里的box model，又该如何使用box model呢？那么此时我们点击上图的box model，下面小编来进行逐一的讲解
其实box model在QSS中是盒子模型，是QSS从前端网页的CSS中参考过来的，盒子模型，盒子模型，顾名思义就是一个盒子，而盒子其实就是一个矩形，所以如何理解这里的矩形呢？
在我们之前学了了那么多的Qt控件，我们可以看出来Qt中的每个控件都好像是方方正正的，所以在Qt中把每个控件都理解为了一个矩形，这个矩形其实就是盒子模型，那么针对这么一个矩形/盒子模型其实就可以分为如上几个部分，我们由内向外来看，CONTENT是内容(content)，PADDING是内边距(padding)，BORDER是边框(border)，MARGIN是外边距(margin)，其实单单凭借小编这么说还是比较抽象的，下面小编借助房子的例子来帮助大家具象化理解
如上，左侧是一个房子，右侧也是一个房子，通过如下建模的过程，我们就可以很好的理解盒子模型的构成了
（1）房子四周的围壁是有厚度的，我们把房子的围墙的厚度理解为边框border
（2）一个房子中例如冰箱，电视，沙发，桌子，凳子等都可以称之为家具，这些家具本身就是内容content
（3）对于家具，我们假设这些家具都不是紧挨着墙摆放的，而是距离墙有一定的距离，我们把家具和墙之间的距离称之为内边距padding
（4）在村里，房子和房子之间一般都要留出一定的距离，我们把房子和房子之间的距离称之为外边距margin
我们可以通过如下QSS中的属性来设置上述边距和边框的样式，对于外边距，内边距，边框的单位是像素px，默认为0 关于像素的讲解，在第八点，Qt坐标系的认识中的第13小点中进行的讲解，详情请点击<——
（1）margin外边距，是复合属性，即可以拆分成如下四个属性，通过一个margin就可以设置四个方向的外边距
……（1）margin-top，上外边距
……（2）margin-bottom，下外边距
……（3）margin-left，左外边距
……（4）margin-right，右外边距
……（5）我们可以通过对上面四个属性单独设置来设置外边距，同时也可以使用margin来设置四个方向的外边距，CSS中也是这样设定的
…………（1）margin: 10px; 上下左右四个方向都设置成10像素的外边距
…………（2）margin: 10px 20px; 上下设置成10像素的外边距，左右设置成20像素的外边距
…………（3）margin: 10px 20px 30px 40px，上右下左(顺时针)四个方向依次为10像素，20像素，30像素，40像素的外边距
（2）padding内边距，也是复合属性，同样也可以拆分成如下四个属性，同样可以使用padding来设置四个方向的内边距，对于padding如何设置的四个方向的内边距，其实和margin设置四个方向外边距都是一样的道理，这里小编就不再赘述了
……（1）padding-top，上内边距
……（2）padding-bottom，下内边距
……（3）padding-left，左内边距
……（4）padding-right，右内边距
（3）border边框，同样也是复合属性，可以拆分成如下三个属性，那么我们可以单独对三个属性进行设置，同样也可以使用一个border可以设置如下三个属性，设置属性的顺序不影响属性的设置
……（1）border-style，用于设置边框的样式，例如虚线dashed，实线solid等
……（2）border-width，用于设置边框的粗细，单位是像素px
……（3）border-color，用于设置边框的颜色，可以使用#或rgb这种计算机中的颜色rgb红绿蓝的方式，也可以通过red，black显示指定颜色进行设置关于计算机中的颜色rgb，在第三点QWidget的styleSheet属性中的计算机中的颜色中进行的讲解，详情请点击<——

盒子模型的使用

设置标签的边框和内边距

如上我们学习了和盒子模型有关的相关属性，边框border，内边距padding，外边距margin，接下来我们通过代码来验证并且使用一下这些属性，首先我们针对标签设置一下边框和内边距，所以接下来我们创建一个项目名为qss_8，基类为QWidget，派生类为Widget的项目，然后点击ui文件，进入Qt Designer
如上，左侧我们拖拽一个标签控件，将标签控件显示的文字修改为文本内容，我们可以看到对于我们我们修改的文本内容初始状态下是紧贴左侧的，即代表初始状态下左内边距是0像素

#include"widget.h"#include<QApplication>intmain(intargc,char*argv[]){QApplicationa(argc,argv);QString style="QLabel { border: 5px solid red; padding-left: 5px; }";a.setStyleSheet(style);Widget w;w.show();returna.exec();}

那么我们在main.cpp文件中，main函数中通过QApplication设置全局样式，此时我们定义一个QString类型的style，然后选择器选择QLabel标签控件，接下来我们就可以设置边框了，边框分为三个属性，分别是边框的粗细，边框的样式，边框的颜色，那么我们对于边框的粗细设置为5像素，对于边框的样式设置为实线solid，对于边框的颜色设置为红色red，接下来我们将左内边距设置为5像素即可，接下来通过QApplication的应用程序对象a进行调用setStyleSheet，将样式style进行传参设置即可

运行结果如下
如上，此时标签的边框的粗细是5像素，边框的样式是实线solid，边框的颜色是红色red，并且边框的左内边距为5像素没有问题

#include"widget.h"#include<QApplication>intmain(intargc,char*argv[]){QApplicationa(argc,argv);// QString style = "QLabel { border: 5px solid red; padding-left: 5px; }";QString style="QLabel { border: 20px dashed green; padding-left: 50px; }";a.setStyleSheet(style);Widget w;w.show();returna.exec();}

我们再将标签的边框和内边距再调整一下，注释掉原来的样式，那么对于边框的粗细设置为20像素，对于边框的样式设置为虚线dashed，对于边框的颜色设置为绿色green，接下来我们将左内边距设置为50像素即可

运行结果如下
所以如上，此时标签的边框的粗细是20像素，边框的样式是虚线dashed，边框的颜色是绿色green，并且边框的左内边距为50像素没有问题
其实这里的标签控件内部显示的文本内容其实就是盒子模型中的内容content
我们也可以注意到，其实这里的左内边距从当初的紧贴左侧0像素，逐渐被我们调整为距离左侧5像素，到现在的50像素，随着左内边距的增大，文本内容逐渐向右移，换言之，我们还可以对上内边距，下内边距，右内边距进行设置，此时就可以达到让标签控件的内容content呈现在标签控件内部的任意位置
而对于内边距如果我们不进行手动的设置，其实内边距默认是0像素，同样的对于外边距，边框的粗细的默认值也都是0像素

设置按钮的边框和外边距

如上我们学习了和盒子模型有关的相关属性，边框border，内边距padding，外边距margin，接下来我们通过代码来验证并且使用一下这些属性，接下来我们针对按钮设置一下边框和外边距，所以接下来我们创建一个项目名为qss_9，基类为QWidget，派生类为Widget的项目

#include"widget.h"#include"ui_widget.h"#include<QPushButton>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);QPushButton*button=newQPushButton(this);button->setGeometry(0,0,100,100);button->setText("按钮");}Widget::~Widget(){deleteui;}

接下来我们在Widget的.cpp源文件中，在Widget的构造函数中，我们创建一个按钮，指定父元素为this指针对应的Widget，将按钮挂接到对象树上，让按钮的生命周期随Widget窗口，当Widget窗口关闭，释放，销毁的时候，delete析构释放按钮，接下来我们使用setGeometry设置按钮的坐标和尺寸，坐标对应的横坐标x为0，纵坐标y也为0，尺寸对应的宽度为100像素，高度为100像素，然后接下来使用setText设置按钮显示的文本为按钮关于位置和尺寸，在第一点QWidget的geometry中进行的讲解，详情请点击<——

运行结果如下
如上，由于按钮的位置对应的横坐标是0，纵坐标也是0，那么代表此时按钮是位于父控件的左上角，也就是按钮的原点位置，并且尺寸对应的宽度和高度也都为100像素，没有问题

#include"widget.h"#include"ui_widget.h"#include<QPushButton>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);QPushButton*button=newQPushButton(this);button->setGeometry(0,0,100,100);button->setText("按钮");button->setStyleSheet("QPushButton{ border: 5px solid red; }");}Widget::~Widget(){deleteui;}

此时我们通过setStyleSheet对按钮设置样式，类型选择器选择按钮控件，接下来我们就可以设置按钮的边框了，边框分为三个属性，分别是边框的粗细，边框的样式，边框的颜色，那么我们对于边框的粗细设置为5像素，对于边框的样式设置为实线solid，对于边框的颜色设置为红色red即可

运行结果如下
所以如上，此时按钮边框的粗细是5像素，边框的样式是实线solid，边框的颜色是红色red没有问题

#include"widget.h"#include"ui_widget.h"#include<QPushButton>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);QPushButton*button=newQPushButton(this);button->setGeometry(0,0,100,100);button->setText("按钮");button->setStyleSheet("QPushButton{ border: 5px solid red; margin: 20px; }");}Widget::~Widget(){deleteui;}

那么紧接着对于按钮的样式，我们设置按钮的外边距margin为20像素

运行结果如下
此时如上，按钮的外边距为20像素，但是小编，我怎么感觉不太对呀，感觉相比于没有设置按钮的外边距，按钮设置了外边距之后，好像按钮视觉上给我一种变小了的感觉，是的
我们仔细来看，好像是按钮的位置对应的不是原点了，即按钮的位置的横坐标和纵坐标好像不是0了，按钮的尺寸对应的宽度和高度好像比100小了，是否是真的呢？下面我们来验证一下

#include"widget.h"#include"ui_widget.h"#include<QPushButton>#include<QDebug>Widget::Widget(QWidget*parent):QWidget(parent),ui(newUi::Widget){ui->setupUi(this);QPushButton*button=newQPushButton(this);button->setGeometry(0,0,100,100);button->setText("按钮");button->setStyleSheet("QPushButton{ border: 5px solid red; margin: 20px; }");qDebug()<<button->geometry();}Widget::~Widget(){deleteui;}

别忘了，QPushButton继承了QWidget，而QWidget中的属性中就有geometry，而geometry这个属性中就描述了位置和尺寸，由于QPushButton继承了QWidget，所以自然的QPushButton也可以有了geometry这个属性，自然我们就可以使用日志qDebug()打印进行打印，打印设置了外边距之后的按钮geometry属性中的位置和尺寸，此时就可以验证出来是否按钮设置了外边距之后位置和尺寸会发生改变

运行结果如下
如上，结果显而易见，设置了外边距之后的按钮geometry属性中的位置和尺寸没有发生改变，位置对应的横坐标和纵坐标仍然0位于原点位置，尺寸对应的宽度和高度仍然为100像素
所以给按钮设置了外边距之后，按钮控件会呈现给用户一种变小了的视觉效果，但是实际上按钮控件的位置和尺寸没有发生变化，对于位置仍然是位于原横坐标和原纵坐标，对于尺寸仍然是原宽度和原高度
所以给按钮设置了外边距，虽然按钮控件会给用户呈现一种视觉效果变小了的感觉，但是由于按钮的位置和尺寸没有发生变化，那么自然的，我去点击按钮横坐标为1像素，纵坐标也为1像素对应的视觉效果为空的位置，此时也就可以点击到按钮，因为geometry属性中的位置和尺寸没有发生变化，这个空位置仍然属于按钮的范围内

二、给按钮设置样式

如下蓝字链接，在我们学习了QSS之后，此时我们就可以对控件进行各种各样的自定义了，接下来我们就对按钮的样式进行设置，所以接下来我们创建一个项目名为qss_10，基类为QWidget，派生类为Widget的项目，然后点击ui文件，进入Qt Designer
（1）【Qt】常用控件（七）QRadioButton，QCheckBox的属性和使用
（2）【Qt】界面优化（一）QSS的介绍与基本使用，样式与代码分离
（3）【Qt】界面优化（二）类型选择器，类选择器，ID选择器，并集选择器，子控件选择器，伪类选择器的介绍和使用
此时我们拖拽左侧按钮控件，将按钮控件显示的文本设置修改为按钮，接下来右击按钮控件，选择改变样式表，使用QSS对按钮的样式进行编辑
所以如上，此时我们使用类型选择器选中按钮QPushButton，然后对于按钮显示的字体font-size设置为20像素，接下来，我们就可以设置边框了，边框的粗细我们设置为2像素，边框的样式我们设置为实线solid，接下来就要设置边框的颜色了，此时我们可以点击编辑样式表的上方添加颜色，此时就会弹出一个颜色对话框，此时我们选择一个我们想要设定的边框颜色之后，点击确定即可生成一个rgb形式的颜色
（1）关于像素的讲解，在第八点，Qt坐标系的认识中的第13小点中进行的讲解，详情请点击<——
（2）【Qt】Qt窗口（七）QColorDialog颜色对话框，QFileDialog文件对话框的使用
（3）关于计算机中的颜色rgb，在第三点QWidget的styleSheet属性中的计算机中的颜色中进行的讲解，详情请点击<——

QPushButton{font-size:20px;border:2px solidrgb(255,255,255);border-radius:10px;background-color:rgb(255,170,255);color:rgb(255,255,255)}

如上我们看到当我们设置了按钮显示的文本大小以及边框之后，按钮的样式就发生了改变，此时按钮默认的样式就被覆盖了，其实我们还可以使用border-radius设置圆角矩形，单位是像素值，其实圆角矩形就是可以将矩形的四个角设置为圆形的，设置的像素值越大矩形的角越圆，我们这里设置为10像素即可，接下来我们使用background-color设置背景色，那么我们同样点击添加颜色，选择我们自己喜欢的颜色即可，最后我们使用color设置按钮显示的文字颜色即可，同样的点击添加颜色，选择我们自己喜欢的颜色即可

运行结果如下
所以此时按钮显示的样式，即字体大小，边框，圆角矩形，背景色，显示的文字颜色就为我们想要的了
由于按钮原有的默认样式，我们点击按钮会有背景色的调整，但是由于我们自定义设置了按钮的样式，那么按钮默认的样式就被覆盖了
所以此时小编点击按钮之后，没有任何背景色的变化，所以我们还想要我们自定义的按钮被点击之后进行背景色的改变，如下

QPushButton{font-size:20px;border:2px solidrgb(255,255,255);border-radius:10px;background-color:rgb(255,170,255);color:rgb(255,255,255);}QPushButton:pressed{background-color:rgb(207,232,255);}

所以此时我们就可以使用状态选择器QPushButton:pressed去进行选择这个按钮控件被鼠标按压的状态，当按钮控件被鼠标按压的时候，此时我们设置背景色background-color，点击添加颜色，选择我们自己喜欢的颜色即可

运行结果如下
所以此时鼠标按压按钮控件，此时按钮控件的背景色就会发生改变了，所以此时我们就实现了使用QSS对按钮的样式进行设置，达到了自定义按钮的效果了

所以此时我们归纳一下上面在自定义按钮中使用到的样式属性
（1）font-size，设置字体大小
（2）border-radius，设置圆角矩形
（3）background-color，设置背景色
（4）color，设置文字颜色

三、给复选框的样式进行设置

同样的，我们也可以使用QSS对复选框QCheckBox进行设置样式，所以接下来我们创建一个项目名为qss_11，基类为QWidget，派生类为Widget的项目，然后点击ui文件，进入Qt Designer
（1）【Qt】常用控件（七）QRadioButton，QCheckBox的属性和使用
此时我们拖拽左侧复选框控件，将复选框控件显示的文本设置修改为复选框，接下来右击复选框控件，选择改变样式表，使用QSS对复选框的样式进行编辑
而我们想要改变复选框的什么样式呢？改变复选框的显示字体的大小，改变复选框中勾选框的大小，最关键的是我们想要改变这个勾选框不同状态下的图标，如上，小编已经在阿里巴巴矢量图标库中找到了
（1）对于是否勾选复选框，显示黑色系图标，当勾选复选框的时候，勾选框显示的图标为图一，当没有勾选复选框的时候，勾选框显示的图标为图二
（2）对于鼠标进入复选框的时候，显示蓝色系图标，如果勾选了复选框，那么勾选框显示的图标为图二，如果没有勾选复选框，那么勾选框显示的图标为图五
（3）对于鼠标按压复选框的时候，显示红色系图标，如果勾选了复选框，那么勾选框显示的图标为图三，如果没有勾选复选框，那么勾选框显示的图标为图六
所以既然这么多的图标，此时我们要在项目的QSS中进行使用，那么就要将图标导入到项目中，此时我们就要使用到qrc机制关于qrc机制，在第四点qrc机制中进行的讲解，详情请点击<——，观察到如上界面代表我们此时将图标导入到qrc成功

QCheckBox{font-size:40px;}QCheckBox::indicator{width:40px;height:40px;}

所以此时我们使用状态选择器选择QCheckBox复选框，接下来设置显示的字体大小font-size为40像素，然后我们还要设置复选框中勾选框的大小，而复选框中的勾选框本质上是复选框的一个子控件，所以此时我们就需要使用到子控件选择器QCheckBox::indicator选择复选框中的勾选框这个子控件，那么想要改变一个控件的大小，本质上就是改变一个控件的尺寸，尺寸分为宽度和高度，所以这里我们将宽度weight和高度height都设置为40像素即可
（1）关于位置，尺寸对应的宽度和高度，在第一点QWidget的geometry中进行的讲解，详情请点击<——
此时我们来看，好像复选框左边的勾选框的默认图标由于被我们放的太大像素不够清晰了，但是影响不大，我们要使用我们自己的图标对勾选框的图标进行替换的，那么接下来我们就要开始添加图标了，所以此时我们先使用子控件选择器选中复选框的勾选框这个子控件，要设置的是选中状态，所以我们使用伪态选择器进行选择复选框被选中的状态:checked，然后再使用图像image进行设置，对于图像设置的值，我们可以手动填写url执行图标的路径吗？可以
毫无疑问，肯定可以，但是人总会出错的，尤其是对于图标路径不好写，图标名字较长的情况，容易拼写错误造成图标显示不出来的情况，所以此时我们点击编辑样式表的左上角的添加资源，然后继续点击resource root，点击黑色的勾选图标即可进行给image图标指定url文件路径添加图标，让Qt帮我们url文件的路径自动生成还是挺香的，此时Qt就可以确保不会出现拼写错误

QCheckBox{font-size:40px;}QCheckBox::indicator{width:40px;height:40px;}QCheckBox::indicator:checked{image:url(:/checkbox-checked.png);}QCheckBox::indicator:unchecked{image:url(:/checkbox-unchecked.png);}QCheckBox::indicator:checked:hover{image:url(:/checkbox-checked_hover.png);}QCheckBox::indicator:unchecked:hover{image:url(:/checkbox-unchecked_hover.png);}QCheckBox::indicator:checked:pressed{image:url(:/checkbox-checked_pressed.png);}QCheckBox::indicator:unchecked:pressed{image:url(:/checkbox-unchecked_pressed.png);}

所以如上，对于剩下的图标状态的添加，我们按照如下规则，如法炮制的进行添加即可，需要注意的是，伪态选择器选择复选框被选中的状态是:checked，伪态选择器选择复选框没有被选中的状态是:unchecked，伪态选择器选择复选框被进入的状态是:hover，伪态选择器选择复选框被按压的状态是:pressed

（1）对于是否勾选复选框，显示黑色系图标，当勾选复选框的时候，勾选框显示的图标为图一，当没有勾选复选框的时候，勾选框显示的图标为图二
（2）对于鼠标进入复选框的时候，显示蓝色系图标，如果勾选了复选框，那么勾选框显示的图标为图二，如果没有勾选复选框，那么勾选框显示的图标为图五
（3）对于鼠标按压复选框的时候，显示红色系图标，如果勾选了复选框，那么勾选框显示的图标为图三，如果没有勾选复选框，那么勾选框显示的图标为图六

运行结果如下

所以结果如上，当没有勾选复选框的时候，勾选框显示的图标为图四，没有问题
当复选框还没有勾选的时候，鼠标进入复选框的时候，勾选框显示的图标为图五，没有问题
当复选框被勾选的时候，勾选框显示的图标为图一，没有问题
当复选框被勾选的时候，鼠标进入复选框的时候，勾选框显示的图标为图二，没有问题
当复选框被勾选的时候，鼠标按压复选框，勾选框显示的图标为图三，没有问题
当复选框没有被勾选的时候，鼠标按压复选框，勾选框显示的图标为图六，没有问题

所以此时小编来归纳一下在自定义复选框中用到的样式属性，子控件选择器，伪态选择器
（1）::indicator，子控件选择器，用于选择复选框的勾选框
（2）:hover，伪态选择器，用于选择控件被鼠标进入的状态
（3）:pressed，伪态选择器，用于选择控件被鼠标按压的状态
（4）:checked，伪态选择器，用于选择QCheckedBox被勾选的状态
（5）:unchecked，伪态选择器，用于选择QCheckedBox没有被勾选的状态
（6）width，用于设置控件宽度的样式属性
（7）height，用于设置控件高度的样式属性
（8）image，用于设置控件图标的样式属性，需要给对应的值设置url(文件路径)
那么同样的道理，既然对于复选框我们可以自定义复选框，设置复选框处于不同状态下的图标，同样的那么对于单选按钮我们也可以采用相同的方式进行设置单选按钮处于不同状态下的图标，过程几乎一致，这里小编就不再演示了，感兴趣的读者友友可以自行尝试

四、给单行输入框的样式进行设置

同样的，我们也可以使用QSS对单行输入框QLineEdit进行设置样式，所以接下来我们创建一个项目名为qss_12，基类为QWidget，派生类为Widget的项目，然后点击ui文件，进入Qt Designer
（1）【Qt】常用控件（十）QLineEdit，QTextEdit的属性和使用
此时我们拖拽左侧单行输入框控件，接下来右击单行输入框控件，选择改变样式表，使用QSS对单行输入框的样式进行编辑

QLineEdit{border-width:2px;border-color:rgb(255,255,255);border-style:solid;border-radius:20px;padding-left:10px;background-color:rgb(255,170,255);color:rgb(255,255,255);font-size:20px;}

所以此时我们先使用状态选择器选择单行输入框QLineEdit，然后就可以进行设置样式属性了，首先我们来设置边框border，这次我们就不使用边框border，对边框的三个样式属性进行一并设置了，而是针对边框的三个样式属性进行单独的设置，所以此时我们对于边框的粗细border-width设置为20像素，对于边框的颜色border-color设置为我们想要的纯白色，对于边框的样式border-style，我们设置为实线solid
接下来我们继续设置边框的圆角矩形border-radius为20像素，然后由于此时边框都是圆角矩形了，所以对于单行输入框内的文本我们并不想让文本内容贴紧单行输入框的左侧，而是留出10像素的距离来，这样更为美观一些，所以此时我们将单行输入框的左内边距padding-left设置为10像素即可，接下来我们将单行输入框的背景色background-color设置为我们想要的淡紫色，将单行输入框要显示的文本颜色color设置为我们想要的纯白色，然后将单行输入框要显示的字体大小font-size设置为20像素即可

运行结果如下
如上，此时对于单行输入框，我们设置的各个样式属性都没有问题，但是感觉如果我们使用鼠标选中文本的时候，此时的蓝色背景和白色字体颜色，有点不符合这个淡紫色的气质，所以我们该如何进行调整呢？

QLineEdit{border-width:2px;border-color:rgb(255,255,255);border-style:solid;border-radius:20px;padding-left:10px;background-color:rgb(255,170,255);color:rgb(255,255,255);font-size:20px;selection-background-color:rgb(170,170,255);selection-color:rgb(255,0,0);}

那么如上，我们可以使用selection-background-color设置选中文字的背景色为淡蓝色，使用selection-color设置选中文字显示的颜色为红色

运行结果如下
此时就比较好看了，当然其实这里对于选中的文本如果显示的颜色为白色更为好看，但是这里为了讲解需要，我们还是将这个选中的文本显示的颜色设置为红色
当然，对于审美这个东西，怎么样设置很好看，这就需要一点艺术细胞了，各位读者友友也可以自定设置自己喜欢的样式

下面小编就来归纳一下自定义单行输入框中使用的样式属性
（1）border-width，用于设置边框的粗细/宽度
（2）border-color，用于设置边框的颜色
（3）border-style，用于设置边框的样式/风格
（4）border-radius，用于设置圆角矩形，也就是边框的圆角，像素越大，边角越圆
（5）padding-left，用于设置边框的左内距
（6）color，用于设置文本颜色
（7）background-color，用于设置背景颜色
（8）selection-background-color，用于设置选中文本的背景颜色
（9）selection-color，用于设置选中文本显示的颜色