Easy method for changing Text Input background colour using blocks

Tutorials and DIY Guides
1

I had been doing some searching on how to change the background colour of a text input field using blocks and kept coming across answers saying it was impossible other than a few hack methods I found which didn’t look that great.

I accidentally stumbled on a way using the ‘set’ block from ‘Any Component’ menu, changing the type of component to label so that the Background Colour option was available, then dragging in the component block for the text input.

See my example here

text_input_background_colour
text_input_background_colour668×205 13.4 KB

None of my searches showed this as possible - obviously there is some trick going on where by setting the type of block as label it gives access to the ‘Background Colour’ parameter which isn’t typically available in blocks for text inputs. I am curious which other parameters can be set this way if they aren’t available as standard.

I don’t know why background colour isn’t an option for the text inputs but here is at least a working method that keeps things nice and neat.

2

Hello @02keilj432vnb
Thank you for sharing your workaround.
At the moment, we don’t have a specific block to set the background color of a text input component, but this is a good suggestion! I’ll pass it on to the team.

Your workaround works well in my tests.

An alternative workaround would be using a Layout and setting the text input component’s background to transparent. This way you can set the background color on the container.

Here is an example project: Thunkable