Using TextInput in Qt Quick (QML)

Recently I wanted to created a text input dialog box in QML. QML has nice support for editing large text and one line text. For editing large text we can use TextEdit QML element and for one line text we can use TextInput QML element.

But default appearance of TextInput might not suite look and feel of your application. It was not suited for my application as well. Following is my initial code.

TextInput {
        y:50
        anchors.horizontalCenter: parent.horizontalCenter
        id: text1
        font.pixelSize: 20; font.bold: true
        text: "Enter text here ..."
        focus: true
        width: container.width - 30 ; height: 40
    }

And following is output from above code.

To change appearance, I put it inside Rectangle element and modified its border and other properties.

Here how it looks after my change.

Here is modified code. In following code container is parent Rectangle element.

    Rectangle{
        y: 100
        width: container.width - 30 ; height: 40
        anchors.horizontalCenter: parent.horizontalCenter
        border.width: 3
        border.color: "#4b4b4b"
        color: "lightsteelblue"
        radius: 5
        TextInput {
            anchors.verticalCenter: parent.verticalCenter
            anchors.horizontalCenter: parent.horizontalCenter
            id: text2
            font.pixelSize: 20; font.bold: true
            text: "Enter text here..."
            width: container.width - 40 ;
            color: "#4b4b4b"
            focus: true
        }

        MouseArea {
            anchors.fill: parent
            onClicked: {
                text2.selectAll();
            }
        }
    }

Hope it will help someone.