How to do a color animation of a QLineEdit background

  • Hi, I want to change the background of a QLineEdit in order to provide feedback to the user so, I change it to green if the text introduced is correct and red if it's incorrect but, I don't want the color to persist all the time. I just want to change the color 1 second and then come back to the default color background.

    How can I do it?. I was thinking about using QPropertyAnimation but I read It doesn't accept QString as property for animation.


  • Lifetime Qt Champion

    @JesusM said in How to do a color animation of a QLineEdit background:

    but I read It doesn't accept QString as property for animation

    You want to animate color not string, so no problem. You need to anymate background color.

  • Moderators

    QPropertyAnimation is based on QVariantAnimation, which does support QColor: You can add custom types there as well (including QString), if you want to - check the example in class description.

  • @jsulm oh, I thought what I had to animate was the stylesheet so I needed to introduce a QString. I will try that.


  • @sierdzio ok, the answer I found it's a bit old so now It seems I can use also QString. I will try.

  • Moderators

    You can set QLineEdit background using setPalette():

    const QColor(Qt::Red);
    QPalette palette(widget->palette());
    palette.setBrush(QPalette::Button, QBrush(color));
    palette.setBrush(QPalette::Base, QBrush(color));

    Stylesheet is an option, too, but in this case seems like an overkill (and will likely be slower).

  • @sierdzio but I need to do it with the QPropertyAnimation so I cant use QPalette as QVariant as it is not supported. I tried this:

    checkIaAnimation = new QPropertyAnimation(ui->IaValue,"palette",this);

    It doesn't crash but It does nothing, as is logical, because I am not specifying which color of the palette I want to change (background) but I don't know how to specify it.

  • Moderators

    Ah, right, makes sense. QPalette is not even a QObject so it does not have properties.

    So I think that leaves 2 options:

    • write custom interpolator for QPaletter and register it with qRegisterAnimationInterpolator and your current code should start working
    • subclass QLineEdit and add a QColor property that will update the background palette when modified, then animate that property

  • @JesusM

    In that case, QTimer is appropriate, but if you need animation, you can use QTimeLine as well. like this:

        auto    timeLine = new QTimeLine(1000, this);
        timeLine->setFrameRange(0, 255);
        connect(timeLine, &QTimeLine::frameChanged, [=](int frame){
            auto    p = ui->IaValue->palette();
            p.setBrush(QPalette::Base, QBrush(QColor(frame, frame, frame)));
        connect(timeLine, &QTimeLine::finished, timeLine, &QTimeLine::deleteLater);

  • Moderators

    Yep, that's also a neat idea.

    @Devopia53 said in How to do a color animation of a QLineEdit background:

    connect(timeLine, &QTimeLine::frameChanged, [=](int frame){

    There should be a control object for this labda, so:

     connect(timeLine, &QTimeLine::frameChanged, this, [=](int frame){

  • @JesusM May be like that type result ::


    ChangeColor(QString text)
    ui->lineEdit->setStyleSheet("background-color:none; color:none;");
    else if(text.size()>10)
    ui->lineEdit->setStyleSheet("background-color:rgb(255,0,0); color:rgb(255,255,255);");
    ui->lineEdit->setStyleSheet("background-color:rgb(0,170,0); color:rgb(255,255,0);");


  • Thanks all of you. Your answers gave me the solution! Now It works fine!

Log in to reply