# \#css **URL:** https://discuss.streamlit.io/tag/css/83.md [Latest](https://discuss.streamlit.io/latest.md) · [Categories](https://discuss.streamlit.io/categories.md) · [Tags](https://discuss.streamlit.io/tags.md) --- ## [Simple, safe, and pythonic custom styling](https://discuss.streamlit.io/t/simple-safe-and-pythonic-custom-styling/120440)
**Author:** [@apiad](https://discuss.streamlit.io/u/apiad)\ **Replies:** 1\ **Last updated:** [January 2, 2026, 11:16am UTC](https://discuss.streamlit.io/t/simple-safe-and-pythonic-custom-styling/120440 "2026-01-02T11:16:17Z")
Hey! After tinkering with different hacks to inject CSS in a scoped, safe way into streamlit, I think I found a really nice (although still somewhat hacky) way to create scoped CSS rules. I packaged it all into a minimal… --- ## [Streamlit css parameters (padding, colors)](https://discuss.streamlit.io/t/streamlit-css-parameters-padding-colors/17204)
**Author:** [@Matsudon](https://discuss.streamlit.io/u/Matsudon)\ **Replies:** 2\ **Last updated:** [October 30, 2025, 8:38am UTC](https://discuss.streamlit.io/t/streamlit-css-parameters-padding-colors/17204 "2025-10-30T08:38:48Z")
Hello everyone, First of all a massive thank you to the developpers at Streamlit !! Great job !! I’m wondering if someone could help me with the tuning of css parameters so I can avoid having a big vertical space betwe… --- ## [Applying custom CSS to manually created containers](https://discuss.streamlit.io/t/applying-custom-css-to-manually-created-containers/33428)
**Author:** [@Chay](https://discuss.streamlit.io/u/Chay)\ **Replies:** 14\ **Last updated:** [October 30, 2025, 8:31am UTC](https://discuss.streamlit.io/t/applying-custom-css-to-manually-created-containers/33428 "2025-10-30T08:31:02Z")
Summary I am trying to add custom outline to containers used in my app. I am familiar with the technique of applying custom CSS styles through markdown and have no issue with that. However, I am struggling to only apply … --- ## [Global setting of Latex font size (II) - Issue with version 1.50.0](https://discuss.streamlit.io/t/global-setting-of-latex-font-size-ii-issue-with-version-1-50-0/119595)
**Author:** [@Frank6](https://discuss.streamlit.io/u/Frank6)\ **Replies:** 2\ **Last updated:** [September 29, 2025, 10:13am UTC](https://discuss.streamlit.io/t/global-setting-of-latex-font-size-ii-issue-with-version-1-50-0/119595 "2025-09-29T10:13:57Z")
Dear community, this topic was described and solved in October 2024 for older versions of streamlit. (Global setting of Latex font size). At that time I got kind assistance by edsaac and he proposed a workaround that did… --- ## [How to delete the box behind the chat message input](https://discuss.streamlit.io/t/how-to-delete-the-box-behind-the-chat-message-input/119474)
**Author:** [@Eduardo20](https://discuss.streamlit.io/u/Eduardo20)\ **Replies:** 0\ **Last updated:** [September 15, 2025, 5:23pm UTC](https://discuss.streamlit.io/t/how-to-delete-the-box-behind-the-chat-message-input/119474 "2025-09-15T17:23:16Z")
I’m building a chatbot app and I wanted to make the box behind the chat input invisible, so that it doesn’t cover my background image. I tried searching for it in the devtools, because that’s how I did it for the header,… --- ## [List of buttons with minimal spacing](https://discuss.streamlit.io/t/list-of-buttons-with-minimal-spacing/117567)
**Author:** [@Supratim](https://discuss.streamlit.io/u/Supratim)\ **Replies:** 3\ **Last updated:** [July 29, 2025, 6:56pm UTC](https://discuss.streamlit.io/t/list-of-buttons-with-minimal-spacing/117567 "2025-07-29T18:56:27Z")
Hi i am new to streamlit. I am creating a list of buttons, but I see gaps between buttons due to some CSS issue. How can i create a list of buttons with minimal gap so that one button end and other’s start are at same wi… --- ## [How to inject Javascript into a streamlit dashboard element? Having difficulties](https://discuss.streamlit.io/t/how-to-inject-javascript-into-a-streamlit-dashboard-element-having-difficulties/112290)
**Author:** [@ausar850](https://discuss.streamlit.io/u/ausar850)\ **Replies:** 2\ **Last updated:** [May 22, 2025, 10:00pm UTC](https://discuss.streamlit.io/t/how-to-inject-javascript-into-a-streamlit-dashboard-element-having-difficulties/112290 "2025-05-22T22:00:46Z")
Hi! My Streamlit app generates a nice, interactive stock chart. The only issue is that the time axis gets slightly cut off at the bottom (see attached images). However, when I enter the following in the Chrome DevTools c… --- ## [Unable to inject simple Javascript into a chart element with st.markdown or st.components](https://discuss.streamlit.io/t/unable-to-inject-simple-javascript-into-a-chart-element-with-st-markdown-or-st-components/111724)
**Author:** [@ausar850](https://discuss.streamlit.io/u/ausar850)\ **Replies:** 0\ **Last updated:** [May 6, 2025, 3:20am UTC](https://discuss.streamlit.io/t/unable-to-inject-simple-javascript-into-a-chart-element-with-st-markdown-or-st-components/111724 "2025-05-06T03:20:31Z")
Hi! My streamlit app generates this nice, interactive stock chart. The only problem is that the time axis is cut off a little in the bottom (see attached images). However, if I type in document.querySelector('iframe').c… --- ## [How to correctly save data\_editor changes before button actions](https://discuss.streamlit.io/t/how-to-correctly-save-data-editor-changes-before-button-actions/108261)
**Author:** [@Nathan12](https://discuss.streamlit.io/u/Nathan12)\ **Replies:** 2\ **Last updated:** [April 16, 2025, 9:37am UTC](https://discuss.streamlit.io/t/how-to-correctly-save-data-editor-changes-before-button-actions/108261 "2025-04-16T09:37:48Z")
Hello Streamlit community, I’m facing a challenging issue with my Streamlit app that involves a data\_editor and action buttons. My goal is to prevent users from clicking action buttons while they’re in the middle of edi… --- ## [How do i align st.title?](https://discuss.streamlit.io/t/how-do-i-align-st-title/1668)
**Author:** [@qxlsz](https://discuss.streamlit.io/u/qxlsz)\ **Replies:** 19\ **Last updated:** [March 3, 2025, 7:26am UTC](https://discuss.streamlit.io/t/how-do-i-align-st-title/1668 "2025-03-03T07:26:56Z")
how do i align st.title ? --- ## [How to control Streamlit metric labels and values size?](https://discuss.streamlit.io/t/how-to-control-streamlit-metric-labels-and-values-size/91366)
**Author:** [@Lorenzo2](https://discuss.streamlit.io/u/Lorenzo2)\ **Replies:** 1\ **Last updated:** [January 24, 2025, 5:15pm UTC](https://discuss.streamlit.io/t/how-to-control-streamlit-metric-labels-and-values-size/91366 "2025-01-24T17:15:51Z")
Hi everyone, I’m trying to increase the size of both labels and values in Streamlit metrics. I’ve tried various CSS approaches but haven’t found a reliable solution. What I’ve tried: st.markdown(""" \ \[d… --- ## [Html and markdown are not being properly displayed and ui does not look good](https://discuss.streamlit.io/t/html-and-markdown-are-not-being-properly-displayed-and-ui-does-not-look-good/89073)
**Author:** [@Muhammad14](https://discuss.streamlit.io/u/Muhammad14)\ **Replies:** 5\ **Last updated:** [January 7, 2025, 2:57pm UTC](https://discuss.streamlit.io/t/html-and-markdown-are-not-being-properly-displayed-and-ui-does-not-look-good/89073 "2025-01-07T14:57:42Z")
Hey i am working with phidata AI Vedio summarizer project and i am not comfortable while using the html and css.i do not know what’s wrong, my output does not look good i think there is problem with markdown ot html whil… --- ## [Fixing Responsive Design in Streamlit App](https://discuss.streamlit.io/t/fixing-responsive-design-in-streamlit-app/87972)
**Author:** [@naor117](https://discuss.streamlit.io/u/naor117)\ **Replies:** 0\ **Last updated:** [December 19, 2024, 8:34am UTC](https://discuss.streamlit.io/t/fixing-responsive-design-in-streamlit-app/87972 "2024-12-19T08:34:09Z")
Hi, I am new to Streamlit, and I recently built a chat application for my organization using Streamlit. However, I made a mistake while styling the app. I customized the entire page by directly modifying the CSS of Stre… --- ## [CSS for Controlling App Width No Longer Works in Streamlit 1.40](https://discuss.streamlit.io/t/css-for-controlling-app-width-no-longer-works-in-streamlit-1-40/86205)
**Author:** [@jjaviergalvez](https://discuss.streamlit.io/u/jjaviergalvez)\ **Replies:** 2\ **Last updated:** [November 22, 2024, 9:15pm UTC](https://discuss.streamlit.io/t/css-for-controlling-app-width-no-longer-works-in-streamlit-1-40/86205 "2024-11-22T21:15:59Z")
Hi Streamlit Community, I recently upgraded from Streamlit 1.38 to 1.40 and noticed that my custom CSS for controlling the app width no longer works. Previously, I used the following CSS to adjust the app’s width: .ap… --- ## [Adding a streamlit component into a markdown block](https://discuss.streamlit.io/t/adding-a-streamlit-component-into-a-markdown-block/85839)
**Author:** [@Anish5](https://discuss.streamlit.io/u/Anish5)\ **Replies:** 2\ **Last updated:** [November 18, 2024, 1:18am UTC](https://discuss.streamlit.io/t/adding-a-streamlit-component-into-a-markdown-block/85839 "2024-11-18T01:18:24Z")
I have a custom markdown block that shows some information like user profile import streamlit as st # Define CSS style st.markdown(""" \ .profile-section { background-color: #f9f9f9; borde… --- ## [Chat input layout adjustments](https://discuss.streamlit.io/t/chat-input-layout-adjustments/84635)
**Author:** [@Aravind1](https://discuss.streamlit.io/u/Aravind1)\ **Replies:** 3\ **Last updated:** [November 4, 2024, 10:56am UTC](https://discuss.streamlit.io/t/chat-input-layout-adjustments/84635 "2024-11-04T10:56:52Z")
Hi, I need help with adjusting the layout of this chatbot I’m making using streamlit. From another post I saw here, they fixed some issues (in regards to using tabs and containers) by using code like this: with st.conta… --- ## [How to change background color for SVG graphics with CSS?](https://discuss.streamlit.io/t/how-to-change-background-color-for-svg-graphics-with-css/84311)
**Author:** [@Frank6](https://discuss.streamlit.io/u/Frank6)\ **Replies:** 9\ **Last updated:** [October 30, 2024, 8:18am UTC](https://discuss.streamlit.io/t/how-to-change-background-color-for-svg-graphics-with-css/84311 "2024-10-30T08:18:16Z")
Dear community! First of all thanks for providing Streamlit. It is such a great and wonderful tool and the app I develop would never be in its shape it is today without Streamlit (https://amfupapp.streamlit.app). My sys… --- ## [How to change the multiselect default tag color?](https://discuss.streamlit.io/t/how-to-change-the-multiselect-default-tag-color/17157)
**Author:** [@woden](https://discuss.streamlit.io/u/woden)\ **Replies:** 6\ **Last updated:** [October 23, 2024, 2:30am UTC](https://discuss.streamlit.io/t/how-to-change-the-multiselect-default-tag-color/17157 "2024-10-23T02:30:22Z")
Hi, I’ve played around the streamlit for a while. I’ve found that using this code, I could change the properties. /\* change the select box properties \*/ div\[data-baseweb="select"\]\>div { background-color:#fff; borde… --- ## [Round borders for the option\_menu component / change color of title's icon or hide it](https://discuss.streamlit.io/t/round-borders-for-the-option-menu-component-change-color-of-titles-icon-or-hide-it/80628)
**Author:** [@eurojourney](https://discuss.streamlit.io/u/eurojourney)\ **Replies:** 7\ **Last updated:** [September 6, 2024, 12:31pm UTC](https://discuss.streamlit.io/t/round-borders-for-the-option-menu-component-change-color-of-titles-icon-or-hide-it/80628 "2024-09-06T12:31:21Z")
Hello, I want to have round borders in my option\_menu() component. Any idea how to do this? This is as far as I’ve been able to get, I can see the round border but the color of whatever is behind the option\_menu() compo… --- ## [Remove or hide the anchor (link icon) particularly when using st.markdown to inject CSS](https://discuss.streamlit.io/t/remove-or-hide-the-anchor-link-icon-particularly-when-using-st-markdown-to-inject-css/75516)
**Author:** [@eurojourney](https://discuss.streamlit.io/u/eurojourney)\ **Replies:** 3\ **Last updated:** [September 5, 2024, 10:54am UTC](https://discuss.streamlit.io/t/remove-or-hide-the-anchor-link-icon-particularly-when-using-st-markdown-to-inject-css/75516 "2024-09-05T10:54:07Z")
Hello, I suspect many of you have noticed the anchor / link icon next to, for example, text when using the st.markdown component. With other components, like st.title() I believe this can be hidden but not with st.markd… --- ## [Injecting CSS formatting to a st.data\_editor() widget](https://discuss.streamlit.io/t/injecting-css-formatting-to-a-st-data-editor-widget/80292)
**Author:** [@eurojourney](https://discuss.streamlit.io/u/eurojourney)\ **Replies:** 1\ **Last updated:** [September 3, 2024, 2:55pm UTC](https://discuss.streamlit.io/t/injecting-css-formatting-to-a-st-data-editor-widget/80292 "2024-09-03T14:55:12Z")
Hi! I am interested in being able to inject CSS to a st.data\_editor() widget. I tried using styable\_containers, that did not work due to the nature of the widget, i.e. it renders as a React component. Any suggestion? … --- ## [How to change the header color and font in st.dataframe() and st.data\_editor()?](https://discuss.streamlit.io/t/how-to-change-the-header-color-and-font-in-st-dataframe-and-st-data-editor/69676)
**Author:** [@renanklehm](https://discuss.streamlit.io/u/renanklehm)\ **Replies:** 7\ **Last updated:** [September 2, 2024, 4:40pm UTC](https://discuss.streamlit.io/t/how-to-change-the-header-color-and-font-in-st-dataframe-and-st-data-editor/69676 "2024-09-02T16:40:08Z")
When I want to change something I usually just change the style via CSS, but I can’t find the correct data-testid nor the parameter to change the color of the headers and borders of a dataframe, I’m nowhere near a front-… --- ## [Adding padding to a submit button to better align it vertically with respect to filters with "visible" labels instead of collapsed](https://discuss.streamlit.io/t/adding-padding-to-a-submit-button-to-better-align-it-vertically-with-respect-to-filters-with-visible-labels-instead-of-collapsed/79956)
**Author:** [@eurojourney](https://discuss.streamlit.io/u/eurojourney)\ **Replies:** 2\ **Last updated:** [September 2, 2024, 7:46am UTC](https://discuss.streamlit.io/t/adding-padding-to-a-submit-button-to-better-align-it-vertically-with-respect-to-filters-with-visible-labels-instead-of-collapsed/79956 "2024-09-02T07:46:32Z")
I am trying to align a submit form button with the rest of the filters but when displaying the label, I am having issues keeping the button aligned vertically (see image). I’ve tried stylable\_containers but that seems un… --- ## [How to apply custom style on st.data\_editor()](https://discuss.streamlit.io/t/how-to-apply-custom-style-on-st-data-editor/78842)
**Author:** [@Shaoyu\_Li](https://discuss.streamlit.io/u/Shaoyu_Li)\ **Replies:** 0\ **Last updated:** [August 16, 2024, 7:53am UTC](https://discuss.streamlit.io/t/how-to-apply-custom-style-on-st-data-editor/78842 "2024-08-16T07:53:53Z")
Hello. I am trying to display dataframes with custom styles(like background color) and the following code works fine: def color\_negative\_red(value): color = 'red' if value \< 500 else 'green' return f'background-… --- ## [🚀 Create your portfolio in Streamlit using Airtable as CMS and MaterializeCSS for a modern look](https://discuss.streamlit.io/t/create-your-portfolio-in-streamlit-using-airtable-as-cms-and-materializecss-for-a-modern-look/78685)
**Author:** [@germancastano](https://discuss.streamlit.io/u/germancastano)\ **Replies:** 1\ **Last updated:** [August 14, 2024, 10:00am UTC](https://discuss.streamlit.io/t/create-your-portfolio-in-streamlit-using-airtable-as-cms-and-materializecss-for-a-modern-look/78685 "2024-08-14T10:00:16Z")
Hello, In my latest tutorial, I’ll show you how to create your professional portfolio using Streamlit, a database in Airtable, and MaterializeCSS for a sleek and modern design. This project is perfect if you have basic … --- ## [Is it possible to style or always show the scrollbar in a dataframe?](https://discuss.streamlit.io/t/is-it-possible-to-style-or-always-show-the-scrollbar-in-a-dataframe/75817)
**Author:** [@elsuenog](https://discuss.streamlit.io/u/elsuenog)\ **Replies:** 0\ **Last updated:** [July 26, 2024, 3:50pm UTC](https://discuss.streamlit.io/t/is-it-possible-to-style-or-always-show-the-scrollbar-in-a-dataframe/75817 "2024-07-26T15:50:10Z")
Just as the title suggests, would like to always show the scrollbar, currently it works only when you hover over the dataframe? Also Is it possible to style it? Would like it to be more visible to the user if possible . --- ## [Streamlit defined css variables are not working properly](https://discuss.streamlit.io/t/streamlit-defined-css-variables-are-not-working-properly/75576)
**Author:** [@schancksb](https://discuss.streamlit.io/u/schancksb)\ **Replies:** 0\ **Last updated:** [July 24, 2024, 12:39am UTC](https://discuss.streamlit.io/t/streamlit-defined-css-variables-are-not-working-properly/75576 "2024-07-24T00:39:28Z")
Hi everyone, I’m working on a Streamlit application and am trying to dynamically adjust the background color of a custom element based on the user’s preferred color scheme (light or dark mode). However, I’m encountering… --- ## [Textarea Autocomplete Feature](https://discuss.streamlit.io/t/textarea-autocomplete-feature/67453)
**Author:** [@Santosh\_Vishwanathan](https://discuss.streamlit.io/u/Santosh_Vishwanathan)\ **Replies:** 1\ **Last updated:** [July 16, 2024, 12:25pm UTC](https://discuss.streamlit.io/t/textarea-autocomplete-feature/67453 "2024-07-16T12:25:27Z")
Is it possible to add a textarea to enter the formula based on a list of saved metrics and a dropdown below the textarea to autosuggest the metric as the user types into the textarea ignoring the operator symbols (+,-,\*,… --- ## [Cannot use custom font on Streamlit Cloud: PermissionError](https://discuss.streamlit.io/t/cannot-use-custom-font-on-streamlit-cloud-permissionerror/74492)
**Author:** [@mattiatantardini](https://discuss.streamlit.io/u/mattiatantardini)\ **Replies:** 0\ **Last updated:** [July 9, 2024, 7:32pm UTC](https://discuss.streamlit.io/t/cannot-use-custom-font-on-streamlit-cloud-permissionerror/74492 "2024-07-09T19:32:26Z")
I got a PermissionError on Streamlit Cloud when I try to write a font file to the /static/assets folder to allow streamlit to use the custom font, as explained in this discussion. Locally it works fine, but I guess ther… --- ## [How to customize the color of the option\_menu and round the container corners 15 px?](https://discuss.streamlit.io/t/how-to-customize-the-color-of-the-option-menu-and-round-the-container-corners-15-px/74350)
**Author:** [@eurojourney](https://discuss.streamlit.io/u/eurojourney)\ **Replies:** 0\ **Last updated:** [July 8, 2024, 9:52am UTC](https://discuss.streamlit.io/t/how-to-customize-the-color-of-the-option-menu-and-round-the-container-corners-15-px/74350 "2024-07-08T09:52:16Z")
Hi! I am using the option\_menu on the sidebar to create the menu for my app. The sidebar is dark blue and the container with the menu options is white. When clicking one of the menu options, the color changes to the expe… [Next page](https://discuss.streamlit.io/tag/css/83.md?match_all_tags=true&page=1&tags%5B%5D=css)