How do you customize the PyQT5 TextBox

Question

I have been trying to customised the text box to try and look like this and trying to format the text but so far nothing has worked so i have reverted back to the base code :

self.tbx = QLineEdit(self)
self.tbx.resize(400,75)
layout.addWidget(self.tbx)
layout.addStretch()

Answer 1

You can using a QGroupBox, and add the QLineEdit inside the QGroupBox.

You can customize the QGroupBox to have a round corner and the QLineEdit to have a transparent background and no border using stylesheets mentioned by @kalzso.

The following is an example:

File MainWindow.py (generated by pyuic5):

# -*- coding: utf-8 -*-

# Form implementation generated from reading ui file 'mainwindow.ui'
#
# Created by: PyQt5 UI code generator 5.15.6
#
# WARNING: Any manual changes made to this file will be lost when pyuic5 is
# run again.  Do not edit this file unless you know what you are doing.


from PyQt5 import QtCore, QtGui, QtWidgets


class Ui_MainWindow(object):
    def setupUi(self, MainWindow):
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(480, 254)
        MainWindow.setStyleSheet("")
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setStyleSheet("QWidget\n"
"{\n"
"    background-color: QLinearGradient( x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 rgb(72, 48, 255), stop: 1 rgb(204, 51, 255) );\n"
"}")
        self.centralwidget.setObjectName("centralwidget")
        self.groupBox = QtWidgets.QGroupBox(self.centralwidget)
        self.groupBox.setGeometry(QtCore.QRect(130, 80, 181, 61))
        self.groupBox.setStyleSheet("QGroupBox {\n"
"    border: 2px solid silver;\n"
"    border-radius: 6px;\n"
"    background: rgba(0, 0, 0, 0);\n"
"    margin-top: 4px;\n"
"}\n"
"QGroupBox::title {\n"
"    subcontrol-origin: margin;\n"
"    left: 7px;\n"
"    color: white;\n"
"}")
        self.groupBox.setObjectName("groupBox")
        self.tbx = QtWidgets.QLineEdit(self.groupBox)
        self.tbx.setGeometry(QtCore.QRect(20, 20, 141, 20))
        self.tbx.setStyleSheet("QLineEdit {\n"
"    background: rgba(0, 0, 0, 0);\n"
"    border: none;\n"
"    color: white;\n"
"}")
        self.tbx.setObjectName("tbx")
        MainWindow.setCentralWidget(self.centralwidget)
        self.menubar = QtWidgets.QMenuBar(MainWindow)
        self.menubar.setGeometry(QtCore.QRect(0, 0, 480, 23))
        self.menubar.setObjectName("menubar")
        MainWindow.setMenuBar(self.menubar)
        self.statusbar = QtWidgets.QStatusBar(MainWindow)
        self.statusbar.setObjectName("statusbar")
        MainWindow.setStatusBar(self.statusbar)

        self.retranslateUi(MainWindow)
        QtCore.QMetaObject.connectSlotsByName(MainWindow)

    def retranslateUi(self, MainWindow):
        _translate = QtCore.QCoreApplication.translate
        MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
        self.groupBox.setTitle(_translate("MainWindow", "Text field"))

And the main file:

from MainWindow import Ui_MainWindow

import sys
from PyQt5 import QtWidgets, uic

from MainWindow import Ui_MainWindow


class MainWindow(QtWidgets.QMainWindow, Ui_MainWindow):
    def __init__(self, *args, obj=None, **kwargs):
        super(MainWindow, self).__init__(*args, **kwargs)
        self.setupUi(self)


app = QtWidgets.QApplication(sys.argv)

window = MainWindow()
window.show()
app.exec()

Which gives:

Limitation of my solution:

However, the cursor of the QLineEdit in my solution is of contrasting color, while what you want may be a white cursor. I find it difficult for me to solve this. I find this answer may help to change the color of the cursor. Maybe someone can help to improve this answer and solve this problem.