How do I change the font size of the streamlit radio button’s label?
st.radio(label = 'Highest Rated Restaurants', options = top_ranked_restaurants)
I have this code and I want to change the font size of ‘Highest Rated Restaurants’.
How do I change the font size of the streamlit radio button’s label?
st.radio(label = 'Highest Rated Restaurants', options = top_ranked_restaurants)
I have this code and I want to change the font size of ‘Highest Rated Restaurants’.
Hey @Ardash_Wase,
There’s no clean and native way to do that in Streamlit but if you feel like hacking some CSS, then here’s a solution (toggle the ‘Show code’ expander):
Hi @arnaud,
The way you suggest will result in all the radio widgets on the page having the font size as 32px.
What if you wanted to:
With the following way, I can target any widget, (even add multiple style attributes as function parameters)
import streamlit as st
import streamlit.components.v1 as components
st.set_page_config(layout = "wide", initial_sidebar_state = "expanded")
def ChangeWidgetFontSize(wgt_txt, wch_font_size = '12px'):
htmlstr = """<script>var elements = window.parent.document.querySelectorAll('*'), i;
for (i = 0; i < elements.length; ++i) { if (elements[i].innerText == |wgt_txt|)
{ elements[i].style.fontSize='""" + wch_font_size + """';} } </script> """
htmlstr = htmlstr.replace('|wgt_txt|', "'" + wgt_txt + "'")
components.html(f"{htmlstr}", height=0, width=0)
c1, c2 = st.columns(2)
c1.radio(label='Highest Rated Restaurants', options=("In-And-Out", "Tercera"))
c2.radio(label='Highest Rated Hotels', options=("Taj", "4 Seasons"))
ChangeWidgetFontSize('Highest Rated Restaurants')
ChangeWidgetFontSize('Highest Rated Hotels', '26px')
The only drawback with this method is that it adds a blank line for every invocation of the components.html statement.
Cheers