[Solved] QML color TextArea Background

  • Hi everyone.

    I am starting a new project with QML and I ran into this problem.

    In my application (running on the Desktop) I have several TextAreas. I am using them because of the built-in scroll functionality and I would like the application to look consistent.
    Most TextAreas are "readOnly: false", but I also need one TextArea that is "readOnly: true". I would like to visually distinguish this by changing the background color to gray when the user cannot edit the text.

    Edit: I am aware of the enabled attribute. Unfortunately setting "enabled: false" makes it impossible for the user to select text. It would be nice if the user could still select text, therefore I am using the readOnly attribute.

    So far I have tried using the backgroundVisible attribute together with a gray Rectangle behind the TextArea. This did not give any changes no matter what value backgroundVisible has. Maybe I am using it wrong/misunderstanding what the attribute does?

    Also I tried to set the opacity of the TextArea, but I cannot manage to set the opacity of the text separately. Is there a way?

    I have seen that there is a style attribute available. I am a bit reluctant to use it and not even sure how to use it. Would this be the way to go?

    Thank you very much for your help.

  • As I know Qt 5.1 Qt Quick doesn't support change style for TextArea. But You can change background color in Qt 5.2
    please follow this "link":http://doc-snapshot.qt-project.org/qt5-stable/qml-qtquick-controls-styles-textareastyle.html

    Sample Qml:
    @TextArea {
    style: TextAreaStyle {
    backgroundColor: "#eee"

  • Ok, very interesting. I guess I will have to consider using Qt 5.2 then instead of 5.1. Thanks a lot for the hint!

  • Your welcome! Please add [Solved] to the title. It may help someone with similar issue.

  • I was excited to get this working using Qt 5.2 BETA, but unfortunately, this does not seem to work for me. The following is the simple code snippet I am using under Qt 5.2. Any help would be much appreciated.

    import QtQuick 2.1
    import QtQuick.Controls 1.1
    import QtQuick.Controls.Styles 1.1

    Rectangle {
    width: 800
    height: 600

     gradient: Gradient {
         GradientStop { position: 0.0; color: "lightsteelblue" }
         GradientStop { position: 1.0; color: "blue" }
           width: 100
           height: 100

    // This gives me error "TextAreaStyle" is not a type

            style: TextAreaStyle {
                backgroundColor: "#eee"


  • It is not included in beta! You need to wait for the next release...

  • Ooops! It should work according to the documentation. It must be a bug. Can you report it?

  • It's not, just check the git repository (it was added a few days AFTER beta)

  • ahh, My mistake, :)

  • There is another simpler way though. Just set the "backgroundVisible" property to false and place an image or a colored rectangle as the parent of the TextArea. That should work even in 5.2.

Log in to reply

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.