Question

Forms - Change Style for Disabled fields

Forms

Updated February 17, 2023

asked on October 25, 2022

Any way to change the style of disabled/read-only fields in Forms?

The only change that happens by default is that the outline of the field turns a bit lighter grey, which hardly differentiates the read only portions of the form from the fillable portions.

I would like to add a slight grey background to the read only sections or fields to make them stand out and not look like a selection that needs to be made.

0 0

Answer

SELECTED ANSWER

replied on October 25, 2022

Because the structure of the forms is different, you are not going to be able to use the same CSS for both. But it should be fairly simple to do this with CSS.

I have a couple times that I make the readonly forms remove the border and have a white background (to make them look less like an actual field), so I took that CSS for the basis to test trying to make the disabled appearance more obvious.

Here's some CSS that works on the classic designer (tested on version 11.0.2201.20436) to make the input, textarea, and select readonly fields a darker shade of gray:

.cf-formwrap input[readonly], .cf-formwrap input[backend-readonly] {background-color : #bbbbbb !important;}
.cf-formwrap textarea[readonly], .cf-formwrap textarea[backend-readonly] {background-color : #bbbbbb !important;}
.cf-formwrap select[readonly], .cf-formwrap select[backend-readonly] {background-color : #bbbbbb !important;}

Here's some CSS that works on the new designer (tested on version 11.0.2201.20436) to make the input, textarea, and select readonly readonly fields a darker shade of gray:

.form-q input[readonly], .form-q input[disabled] {background-color : #bbbbbb !important;}
.form-q textarea[readonly], .form-q textarea[disabled] {background-color : #bbbbbb !important;}

Note that I didn't test how these work on the archival/readonly version of the forms, just tested from the form preview.

2 0

Replies

replied on October 25, 2022

$('input[readOnly]').addClass("readOnlySpecial");

0 0

View 2 previous replies

replied on October 25, 2022

Oh thank you, but looking for a non-scripted solution or at least a CSS solution. Something that would work for any form no matter the designer version they choose.

Ideally it would be under the theme, something any user could find and operate. CSS would be ok too though.

0 0

SELECTED ANSWER

replied on October 25, 2022

Because the structure of the forms is different, you are not going to be able to use the same CSS for both. But it should be fairly simple to do this with CSS.

Here's some CSS that works on the classic designer (tested on version 11.0.2201.20436) to make the input, textarea, and select readonly fields a darker shade of gray:

.cf-formwrap input[readonly], .cf-formwrap input[backend-readonly] {background-color : #bbbbbb !important;}
.cf-formwrap textarea[readonly], .cf-formwrap textarea[backend-readonly] {background-color : #bbbbbb !important;}
.cf-formwrap select[readonly], .cf-formwrap select[backend-readonly] {background-color : #bbbbbb !important;}

Here's some CSS that works on the new designer (tested on version 11.0.2201.20436) to make the input, textarea, and select readonly readonly fields a darker shade of gray:

.form-q input[readonly], .form-q input[disabled] {background-color : #bbbbbb !important;}
.form-q textarea[readonly], .form-q textarea[disabled] {background-color : #bbbbbb !important;}

Note that I didn't test how these work on the archival/readonly version of the forms, just tested from the form preview.

2 0

replied on October 26, 2022

I just saw your CSS after finding another CSS solution, both yours and the other one work but do cause the designer canvas to look strange, like the CSS is applying to the fields your working with on the canvas.

I like this look the most also, it makes it easier to read the text on a white background but clearly does not look like a field you need to fill yourself.

border-top: 0px !important;
border-right: 0px !important;
border-left: 0px !important;

1 0

replied on October 26, 2022

Yeah, I've noticed the CSS in the new designer applies on the layout page instead of just in the preview like it does in the classic designer. It's weird.

0 0

replied on February 17, 2023

I came back across this post when searching for something else, and I wanted to update to say there is a way to get the CSS to only apply in the form and not within the Layout page.

Here's an example of some CSS to hide a field based on class name. It's obviously a bit of a problem if it is hidden on the Layout page.

Instead of doing this:

.hiddenField
{
  display:none;
}

Do this:

&.Form.lf-form .hiddenField
{
  display:none;
}

The field will be hidden on the actual form, but not hidden on the Layout page.

Hope this helps!

0 0

You are not allowed to follow up in this post.

Question

Question

Forms - Change Style for Disabled fields

Answer

Replies

Sign in to reply to this post.