Search code examples
c++qtqlineeditpaintevent

Qt4: Decorating a QLineEdit (painting around it)

I am trying to "decorate" a QLineEdit, or to be more accurate, to paint my own custom frame around it, to get the following result:

enter image description here

I tried to use Qt Style Sheets (CSS), but this will only enable trivial frame decorating (changing width/color/size etc...), nothing fancy like the above.

I also tried inheriting from QLineEdit and overriding its void QLineEdit::paintEvent(QPaintEvent* e), but then I realized that reimplementing it means I will lose the QLineEdits "editness" (sorry for butchering the language here) - the textbox, the cursor, and the ability to insert text.

How can I achieve the above text box?
Is this a combination of QLabel perfectly located behind a QLineEdit?

Solution

  • Try to use composition. Create your own Widget inherited it from QWidget, paint what you want in QWidget::paintEvent and place QLineEdit above it. Probably you'll have to center it and use css for QLineEdit to make it look smooth. 

    class MyWidget: public QWidget
{
explicit MyWidget(QWidget* parent = 0):
QWidget(parent),
line_edit(new QLineEdit(this))
{
     //  place line_edit in center of QWidget
}

private: 
QLineEdit* line_edit;
}

    Or you can override void QLineEdit::paintEvent(QPaintEvent* e) like this

    void QLineEdit::paintEvent(QPaintEvent* e)
{
      //paint your border
      QLineEdit::paintEvent(e);
}

    And you won't lose the QLineEdits "editness".