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,
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,
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.
Kevin,
You should be able to do it with field rules.
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
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;
}
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.
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.
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.
Thanks @████████. I thought that was the case.