Overwriting the "not-allowed" cursor on disabled components

Anvil Q&A
1

What I’m trying to do:
At the moment the standard “not-allowed” cursor appears over components, that have the “enabled” property set to False.

I am trying to use the “normal” cursor, i. e. “auto”, when users are hovering over a disabled component, as the css already shows the component as greyed out, and thus the big red cursor is a bit of an eye-sore.

What I’ve tried and what’s not working:
I tried assigning a custom role to the component, and adding the following to my theme.css:

.anvil-role-not-editable: {
    cursor: auto;
}

This has no effect on the cursor when hovering over the component at all.
Is the “not-allowed” cursor defined somewhere else? If so, how would I go about overwriting it?

2

Not sure if this will fix it, but have you tried specifying a value like default instead of auto?

3

Try adding this to your theme.css

input[type="text"][disabled],
input[type="checkbox"][disabled],
input[type="radio"].disabled,
input[type="checkbox"].disabled,
fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  cursor: auto !important;
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  cursor: auto !important;
}
1 Like
4

Thank you for taking the time to reply, apologise for the late response.

@divyeshlakhotia’s response has been marked as the solution, as it worked for all components, except not for TextArea, which was what I was was trying to accomplish. I should have specified that in the original question.

The solution I came up with, after inspecting the HTML/CSS and looking through theme.css, was adding cursor: auto to the following:

textarea.anvil-component[disabled] {
  border: 1px dashed #888;
  padding: 4px 8px;
  background-color: transparent;
  cursor: auto;
}

I’m sure it’s possible to add a class-selector on the above, to change the cursor base on an Anvil role, but I have not tried that out yet, as the above example suits my needs.

3 Likes
5

Glad that it worked out for you!

1 Like