How can I set background of TextField to white
-
Well, the title is my question: How can I set background of TextField to white. I am using the Material Style btw.
hi @maxwell31
TextField has background property you can assign it a Rectangle and set that color to white
e.g:TextField{ background: Rectangle{color:white} }
-
Thanks. That was what I first tried. However, I was unhappy with it, as it would remove the coloured line, present in Material style. It turns out, that this coloured line is actually the background (from QtQuick/Controls.2/Material/TextField.qml):
background: Rectangle { y: control.height - height - control.bottomPadding + 8 implicitWidth: 120 height: control.activeFocus || control.hovered ? 2 : 1 color: control.activeFocus ? control.Material.accentColor : (control.hovered ? control.Material.primaryTextColor : control.Material.hintTextColor) }
So if I want to keep that line, I guess I need to put my TextField into a parent Rectangle for the background, right?
-
Thanks. That was what I first tried. However, I was unhappy with it, as it would remove the coloured line, present in Material style. It turns out, that this coloured line is actually the background (from QtQuick/Controls.2/Material/TextField.qml):
background: Rectangle { y: control.height - height - control.bottomPadding + 8 implicitWidth: 120 height: control.activeFocus || control.hovered ? 2 : 1 color: control.activeFocus ? control.Material.accentColor : (control.hovered ? control.Material.primaryTextColor : control.Material.hintTextColor) }
So if I want to keep that line, I guess I need to put my TextField into a parent Rectangle for the background, right?
@maxwell31
I have no idea how that TextField looks in that material style x)but maybe something like this will work ?
background: Rectangle{ color: "white" Rectangle { y: control.height - height - control.bottomPadding + 8 implicitWidth: 120 height: control.activeFocus || control.hovered ? 2 : 1 color: control.activeFocus ? control.Material.accentColor : (control.hovered ? control.Material.primaryTextColor : control.Material.hintTextColor) } }
quick and dirty 😉