Custom CSS Role for TextBox not working

Anvil Q&A
1

I’ve been trying for some time now to get a custom role to work on my text boxes with no luck. I have added for example this custom role in the .css asset:

.anvil-role-red {
  color: #ff0000;
}

I also created the corresponding role in the Roles section both restricted to TextBox and for all components.

I’m sure there is a simple solution to this, but it has eluded me.

1 Like
2

This is a case of css priorities so try this:

input.anvil-role-red {
  color: #ff0000;
}
3

That doesn’t seem to be doing it for me? Is these somewhere particular I need to place it in the CSS file?

4

here’s a clone
https://anvil.works/build#clone:UTMEL74F67RAP6WD=NEGZGTBXTGL734ZRETOPUGYG

My css only targets TextBox components and I’ve added it to the bottom of theme.css

you can also just do

.anvil-role-red {
  color: #ff0000 !important;
}

but generally important is used as a last resort.

5

I was finally able to get it to work (without the need for the “!importance” decleration). Not sure what was going on, but it seems to be working now, maybe it needed to be at the bottom, but thought I had tried that previously?

Thank you for your guidance!

1 Like