On my computer, the font looks like this:
On my mobile device in Safari, the same font appears to be faded or dimmed. What would cause this? The first column (where the font is normal) is a text field, the far-right dimmed column (with value 1,890) is an input field that has been disabled. Would the disabled input part cause the mobile device to dim it?
I do not have it set to dim when not able to be clicked.
Any ideas?
JohnMark…I set it to 3 like you have pictured and it didn’t seem to change anything.
It seems like that setting applies to images instead of text?
(Thank you for your input!)
This is due to iOS styling the disabled input. You will need to add a style to the header of each page where you want to override the default iOS styling. Try adding this:
<style>
input:disabled {
-webkit-text-fill-color: rgba(0, 0, 0, 1);
-webkit-opacity: 1;
</style>Disable the input make it dimmed. Replace with Text and see the result or apply Derek suggestion.
Hi there. I’ve done this and it works. However, the font color becomes black to all disabled input. I want it to behave as what their individual colors assigned to their style was. Is there anyway to do this?
Don’t want to use texts as I use this input as a reference for dynamic values.
Change the rgba values in the parentheses to change the color of the text.
Can I change that to dynamically change the color using the element’s style or condition. When I changed that using the rgba, it becomes static
Hi Derek!
Thanks for your explanation.
I tried to add an HTML element with your code and it seems having no effects because the color of the text within the input box (when disable) is lightened (or otherwise altered).
Could you please advise me ? Thanks in advance for your help!
Paul
Hi Paul. You need to add the script at the page level, not in an HTML element. You do this in the Property Editor for the page.
Open the Property Editor for the page, scroll down the bottom of the Property Editor and you will see “Page HTML Header”. Put the code there.
See my screenshot below. I have some additional code in my example that cleans up scroll bars on mobile as well. You can add any additional CSS here and it will affect the entire page.
