You are viewing limited content. For full access, please sign in.

Question

Question

Remove the disabled option from Checkbox

asked on May 7, 2024

Good Afternoon,

     Is there a way to remove the disabled attribute from a checkbox using the LFForm object? My basic issue is that I cannot style a checkbox with CSS when it is set to readonly.

Thank You,

0 0

Answer

SELECTED ANSWER
replied on May 8, 2024

ah, unfortunately that particular setting is blocked by the browser itself. If you want a field that mimics disabled events you would need to remove readonly from forms and add pointer-events: none to your css. This would remove the accessibility to screen readers that the disabled state provides because you have no way to add an aria-disabled state to the element. 

1 0

Replies

replied on May 7, 2024

Kevin,

You should be able to do it with field rules.

3 0
replied on May 7, 2024

You could also set the CSS class via field rules if you do need to retain the disabled state. There should be nothing stopping you from using CSS to style any field on the form regardless of its disabled/readonly state. If you want to share your CSS we can help you narrow down the selectors you are using

1 0
replied on May 8, 2024 Show version history

Thank you, Here is the CSS I am using. It works if I uncheck readonly for the fields. 

input[type=checkbox] {
   box-shadow: inset 0 0 0 1px #555 !important;
   color:black !important;
   accent-color:black !important;
}

0 0
replied on May 8, 2024

It looks like it is applying fine on my end (latest version of forms 11 update 5). If you right click the input checkbox and go to inspect, you should be able to locate the input element in the HTML and determine what styles are being applied. If for some reason your styles are being overwritten you just have to make your CSS a little more specific

 

1 0
replied on May 8, 2024

Thank you @████████. Yes, the border works, but the accent color should be black. If you uncheck readonly, it is applied correctly. It should look like this. It seems that the disabled flag is overriding the CSS. 

0 0
SELECTED ANSWER
replied on May 8, 2024

ah, unfortunately that particular setting is blocked by the browser itself. If you want a field that mimics disabled events you would need to remove readonly from forms and add pointer-events: none to your css. This would remove the accessibility to screen readers that the disabled state provides because you have no way to add an aria-disabled state to the element. 

1 0
replied on May 10, 2024

Thanks @████████. I thought that was the case.

0 0
You are not allowed to follow up in this post.

Sign in to reply to this post.