How to write custom CSS in Retool!

EDIT 5/3/2020: Updated post to reflect the recent addition of the color picker for text components (which rendered my example obsolete).


Often, people will ask me questions along the lines of:

  • How can I change the color of this text?
  • Or the background color of this container?
  • Can I hide this part of this component?

The answer? Custom CSS!

Disclaimer: this isn’t a fully designed feature in Retool as of posting this (Feb 2020), but more of an escape hatch to help you add that little bit of polish or branding that your team is asking for.


There are 2 ways to add custom CSS to Retool apps.

  1. Globally for all Retool apps — you can add any CSS you’d like to the “Preloaded CSS” area of the /settings/advanced page. Note: you currently need admin permissions to add this.
  2. Locally to 1 Retool app — first, add a Text Component to the page and configure it to “Render as HTML.” Then write any CSS between <style> </style> tags. It will affect all components in the app.

In either case, you’ll want to inspect elements using the Chrome Inspector to find the right classes to target. We prefix components with _retool- so if you have a components named “textinput1” it will have a class of _retool-textinput1 that you can target.

Here’s an example of adding CSS to change the color of the icon in a text input component:

And here’s the code, I’m using:

<style>
  ._retool-textinput1 .anticon {
    color: red;
  }
<style>

In this example, I’m scoping the CSS to the icon within the textinput1 component so that it doesn’t unintentionally affect other components.

1 Like

Was just Googling for this :slight_smile:

2 Likes

Thanks. I’m probably missing something obvious but not having any luck. Followed your example and doesn’t seem to find the class because the color is not red:

@dgarvin57 can you click on the “computed” tab to see the color property and why it looks like it’s being overridden?

Is this what you mean? I’m still kind of new to web development so not sure if I understand what you’re getting at…

@dgarvin57 hm, not sure what’s going on. I pinged another engineer internally, give me a minute!

Hey @dgarvin57 sorry this post is a bit out of date. We’ve since launched a native color picker for text components so this is overriding your CSS (the color picker is scoped more specifically than the CSS I initially wrote).

I’ll update my post tonight with a better & update-to-date example :laughing:

Here’s the color picker for text in action:

@dgarvin57 - If you want to use HTML to manage the color of this text, you can use the “!important” tag after you classify the color as red.

For example:
._retool-text-2 {
font-color: red!important;
}

3 Likes