Customising Text Input Box when set to 'Read only'

Ask the community
1

Hi there. I noticed that when you connect a Text Input Box to a content collection and set the field type to ’ Read only ', there is no option to change the design of the text box, specifically the text font color, the background color and the border color. By default, the border and text color is set to grey and there is no option that lets you change it. In the design panel, you can change the colors for Regular, Hover, Focus and Error . But there is no option to change the colors for Read only mode. This grey-by-default text is barely visible on the white background.

Here’s a screenshot of how the Text Input Box appears when set to Read only :

3384×1714 224 KB

1 Like
2

Hi @pratham ,

I’m Carmel from the Editor X team.

Did you try to set to read only, and edit the design properties you mentioned in regular mode? This results in a read only input field with the colors I want.

2130×1230 252 KB

I hope this helps. If not let us know.

Thanks,
Carmel

3

Hi @carmelsc ,

Thanks for your help. This does work when you have a single text input box that is set to Read only , which is not connected to the Content Manager . However, I want the text input box to show text from my content collection. So I’ve added a text input box to a Repeater and connected it to my content manager. I’ve set it to Read only and it perfectly displays the text as it is supposed to. But here’s where the problem occurs. The font and the border color is set to grey, by default (as shown in the screenshot above). And there is no way to customise it. I tried unchecking the Read only checkbox and it still displays the text but the color remains the same.

So this is the issue. hope you get it. And again, thanks for your help. (:

4

Any solution to this guys?

5

Hey Pratham,
I’m Liron from the Editor X product team.
You can set the input field to ‘Read only’ and change the text color to any color you want by setting the Input color instead of the placeholder color.
For example in this Repeater the Input color is blue:

1199×664 36.9 KB

And as you can see in the published site the text color is also blue as I wanted:

1247×389 4.2 KB

Please feel free to reach out again with any questions or concerns.
Liron

1 Like