Can you use the disabled interaction styling with a custom text field?

I have created custom text fields for our company library following these instructions: https://www.axure.com/support/training/custom-text-field-tutorial

However, when I disable the fields, the “transparent” text field turns into a grey rectangle and is visible. Is there any way to change this styling?

I figure I could probably add a show/hide interaction on whichever button is disabling the field… but I’m trying to use this in a reusable library and having the interaction on an extra button that my users won’t need 99% of the time seems silly.

Anyone know of any tricks?

Here’s an example with a normal styled field and a disabled field.

Example text field

I’m not aware of any way to do this natively in axure. The background is showing up because the browser defaults that background in the user agent stylesheet.

What I typically end up doing is adding a style that specifies the formatting for disabled fields. You can do that by putting some JS in the page onLoad event (choose open Link as the action, and then choose the “Link to an external url or file” and put the following in the hyperlink field (you can hit the FX button to have a bit more space to see what you’re typing).

javascript:
var sheet = document.styleSheets[0];
sheet.insertRule(“input[type=‘text’]:disabled {background: transparent;cursor:not-allowed;}”,0);
throw new Error();

One thing to note here, is that you could actually ditch the two widget approach and use the stylesheet injection to style your inputs using CSS instead. This approach, is of course outside of axure’s built in functionality and not officially supported. That being said, this is how I do all of my prototypes to get rounded corners, specify active formatting, etc. Not sure if RP9 will break any of this or not. You’ll find several people on the forums who can help you with some of the JS stuff.

disabled field styling via js.rp (47.1 KB)

To add to the above, if you happen to be using Axure RP 9 then text fields allow further customization and have a disabled interaction style available. If you use RP 9 for future projects then hopefully that helps!

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.