CSS hacks

sorry frontend engineers / web scrapers, I’ll be doing some shortcuts in this explanation :slight_smile:

Unfortunately there’s no list of “CSS class name to corresponding Streamlit widget”, since CSS classes are generally there to apply a set of design rules instead of being responsible for mapping to a unique widget like an ID. For example if I want to turn a button to red I’d only add the .red class to my HTML element and then have .red {color: red;} in my CSS file, rather than adding color:red in a direct .button {color: red;} class.

Going further into this, most direct CSS class names to widgets are autogenerated by a special CSS library called emotion when Streamlit is built for release, you’ll notice them pretty quickly they resemble st-cp or css-glyadz etr89 …so you can’t really maintain a map of randomly generated CSS names to widgets that would change for every Streamlit version.

So for CSS hacking, the most robust way to do widget selection is to look for the widget container, which generally has a very stable name like stSlider or stBlock, and then dig into the div hierarchy for the element you want. Basically you get things like div[data-baseweb="select"] > div or from @BugzTheBunny 's css file .stTextInput>div>div>div

If you are courageous then yes you’ll find the names inside the source files, but honestly you’ll be much faster by using the web inspector to “guess” the correct CSS class name.

1 Like