CSS to change all m3 textarea

Anvil Q&A
1

What I’m trying to do:

I would like to add a base CSS rule for my text areas to change the background color. I’ve recently added the M3 component package to my application but the components do not accept the basic CSS rules put in place. I know it has something to do with the post linked below, but I’m still having a hard time grasping some of the concepts described.

What I’ve tried and what’s not working:

Here is the current CSS I expect to set the background color of my textareas to the surface variant themed color

Code Sample:

input.anvil-component,
textarea.anvil-component,
.anvil-component select,
.anvil-datepicker input {
  font-size: 16px;
  line-height: 1.5;
  border-radius: 4px 4px 0 0;
  background-color: %color:Surface Variant%;
  color: %color:On Surface Variant%;
  box-shadow: none;
}

Any insight would be much appreciated!

1 Like