How to style the disabled state of a form input

Publishing help Editor
1

Hey there, I have a form with text input fields. Some of the text input fields are disabled via javascript, i.e. by setting the “disabled” property on the “input” tag. However I can’t find a way to set the styling for this disabled state. I would expect to find an entry “Disabled” in the list of states, but it’s the only state that is not in the list.

image
image1006×859 50.9 KB

On the deployed website I end up with a white text on white background because of this and I can’t find a way to change the background color. If I inspect the element I can see that Webflow is explicitly styling the input based on it’s disabled state, but I can’t see where I can adjust this in the Webflow Designer.

image
image1906×568 81.2 KB

Any help is much appreciated.

2

Hi, Andy!

Unfortunately I don’t know the answer to your question, but seems that you know the answer to my question. I’ll highly appreciate your help.

How you’re adding the “disabled” attribute to the elements, I tried:

$('#my-id').attr('disabled');

but it doesn’t work.

Thank you!

3

Not at my computer but I believe the jQuery syntax for setting an attribute requires a second param. e.g.

$('#my-id').attr('disabled','');

Or try to make it truthy, e.g. 'true'

4

i was trying to solve this too. i tried try to style it in chrome’s inspector first, then copy the adjustments made into custom code.

in my case:

<style>
		element.style {
		}
			.w-input[disabled]:not(.w-input-disabled), .w-select[disabled]:not(.w-input-disabled), .w-input[readonly], .w-select[readonly], fieldset[disabled]:not(.w-input-disabled) .w-input, fieldset[disabled]:not(.w-input-disabled) .w-select {
    		background-color: hsla(0, 0%, 94.9%, 0.05);
		}
</style>```