How to write custom CSS in Retool!

[alex]

EDIT 2/17/2023 A new, updated guide on writing custom CSS can be found here: How to use Custom CSS in Retool Apps

EDIT 5/19/2021: Updated post to reflect the new per-app custom CSS feature, which makes all of this a lot easier

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!

---

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 — click the three dots, then scripts and styles. CSS 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:

  ._retool-textinput1 .anticon {
    color: red;
  }

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

You can read more about app appearances and CSS in our docs here.

[david]

Was just Googling for this

[dgarvin57]

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:

[justin]

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

[dgarvin57]

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...

[justin]

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

[alex]

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

Here's the color picker for text in action:

[ibgoldbergs]

@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;
}

[phoop]

It should be noted that if you copy the code exactly as it’s written then it will not work. Just wanted to point this out for any web newbies or someone like myself who could not for the life of me figure out why this wouldn’t work for 30 minutes, but the last style tag needs to be a closing tag </style>. Full code example is:

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

[alex]

Thanks @phoop – updated!

[mattB]

Hello Alex and the Retool Community!

Thank you for sharing. I am loving retool, and the support team that is behind it. It seems really powerful AND doesn’t have too steep of a learning curve. Nevertheless, I need a bit of help figuring out this:

• I can’t seem to find a way to HIDE the entire heading of a table.

I am attempting to hide the header because I am using the table in a context that renders the header redundant and a waste of space.

So, in my attempt at following your instructions I ended up with this code:

<style>
  ._retool-table2 thead {
    display: none;
  }
</style>

But it is not working…I noticed the table components are react tables… maybe that is why my css code is not working?

Would you mind pointing me in the right direction?

Thanks in advance,
Matt

[alex]

Hey @mattB — this seems to work for me! Just remember to update table1 to your table's name.

<style>
  ._retool-table1 .ReactTable .rt-thead  {
    display: none;
  }
</style>

[mattB]

@alex, thanks! Worked perfectly, but I have another question, presumably related…
Is there a way to style components within a listview so that each component

• touches on the left / right / top / and bottom border; and
• I can control the border / shadow of the component

I am doing trying to do this in order to make the ListView appear like a table (albeit on steroids).

To begin, I tried setting the CSS of the ReactTable you helped me style with the CSS code shown below… the MARGIN property works, but I can’t get the rounded border to go away.

Also, I am just realizing that Retools GUI is responsible for the spacing that exists between the components within the listview. (I am assuming the GUI sets the XY coordinates of each component on the grid, and by default, will not let them touch each other)… Is there some way to get the components closer to each other?

Thoughts?

<style>
    ._retool-table1 .ReactTable {
    border: hidden;
    box-shadow: hidden;
    padding: 0px 0px; 
    margin: 0 5px;
  }
  
  ._retool-table1 .ReactTable .rt-thead  {
    display: none;
  }
</style>

[sseira]

@alex

picker

I cant seem to find the render as html option every one here is using ...
Where can this be found?

[sseira]

All I need to do is add a bottom border on text so that i can make the list viewer look like an actual list

[alex]

Hi @sseira thanks for your comment! We actually added a proper CSS stylesheet area in the app editor recently. You can access this from the Scripts and styles option in the ... menu of the Retool app editor. Here's the product announcement in our release notes.

And here's aa GIF of the feature in action:

That said, the workaround described by this thread is officially deprecated! You are read more in our documentation here: https://docs.retool.com/docs/migrations-and-deprecations#custom-css-in-text-v2

[codr1]

Hi, all. Trying to change the CSS of a Text component (not input text) and not working. Specifically I am trying to override the font size. I can successfully override the

._retool-TextWidget2 ._retool-container-text1 ._retool-text1 {
height: 20px;
font-size: 55px !important;
}

The height works, but the font-size always gets overriden. Is there a different control I should use?

[ndipreta]

seeing the same issue

[edavid]

Hello, I have tried this, and also tried to override the font size using !important, still no change.

[victoria]

Hi all! I think I got this to work It took a bit of trying. Looks like we have to specify the <p> tag inside the component for the font-size changes to work!

#retool-widget-text1 p

Here was my process for anyone curious:

First, I grabbed the selector (using the browser inspector > copy > copy selector) of the main text component. No luck.

Then, I tried grabbing some inner divs and still no luck.

Finally, grabbing the innermost <p> element seems to have worked! We can shorten the selector by just using #retool-widget-text1 p

Let me know how this works for y'all!