QML - How to change TextField font size

Question

How can I set the font size of a TextField element in QML? wanna change size of the placeholderText and also for the text which the user enters.

I tried with a lot of ways without luck!

TextField {
    id: name_TextField; horizontalAlignment: Text.AlignHCenter;
    Layout.preferredWidth: parentCLayer.width * 0.90; Layout.preferredHeight: 50
    style: TextFieldStyle {
        font.pixelSize: 20  // This doesn't seem to work either
    }
    placeholderText: qsTr("Your name here")
}

Answer 1

Using the font member of TextField

The TextField type itself has a member font which contains an instance of the QML basic type font. It's sufficient to change the values of the inner-members of the font member of TextField to make the changes you want to see. Note that the color is provided by the TextField itself, not the font type.

TextField {
    font.pointSize: 20
    font.bold: true
    font.family: "Times New Roman"
    textColor: "red"
}

Default Style

Custom Style

Using the style member of TextField

If you want to do more in-depth styling of the TextField you can attach a TextFieldStyle to the style member of the TextField. The TextFieldStyle instance also has a font member, though in the IDE it will complain that font has no members if you reference them with dot notation, this may be bug QTCREATORBUG-11186. I believe the proper way to assign values is using group notation by referencing the font property with inner-items as such:

TextField {
    style: TextFieldStyle {
        background: Rectangle {
            color: "red"
            radius: 10
        }
        font {
            bold: true
            pointSize: 22
        }
        textColor: "white"
    }
}

It could be that bug #11186 is a genuine bug, or maybe by design the font property is TextFieldStyle is null; someone with better Qt/QML knowledge could provide a clearer answer as to that part of the question.

This guide on styling may help: http://wiki.qt.io/Qml_Styling

Answer 2

You can use the style property to customize your TextField. For example:

TextField {
    style: TextFieldStyle {
        font.pixelSize: 14
    }
}

I tried it and it works like a charm