Change Text Input icon adornment color

App Building
,
#1

Hi, I've been trying to setup my input to have a slightly different case of "warning"-level validation. I have data like this:

{
  "title": {
    "id": 120,
    "defaultText": "Meatballs",
    "translationsByTextId": {
      "nodes": [
        {
          "languageCode": "da",
          "translationText": "Frikadeller"
        },
        {
          "languageCode": "fi",
          "translationText": "Lihapullat"
        },
        [...]
      ]
    }
  }
}

which is to be editable one language at a time. I want to display an indicator for when any supported language is missing text though. I've managed this via suffixIcon but the default color is not apparent enough. See image:

image

Is there any way to change this color? The only style on Text Input for adornment seems to be related the input outline.

#2

you could do this with custom CSS (available in the three dots at the top -> scripts and styles -> CSS).

your class is likely to be unique to the component so it won't exactly match my image but should be enough to help you get started

image
image1251×605 43.7 KB

#3

Thanks for the reply! Sadly this doesn't work since the input field is in a module and not an app. There seems to be no way of adding custom CSS to modules?

#4

Hi @Herge, you're correct about css in modules :disappointed: I'll post here if we're able to ship a fix for module css!

#5

Could you try using the global CSS option under advanced org-wide settings?