How to change font size of streamlit radio widget title?

Using Streamlit
1

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

2

Hey @Ardash_Wase,

There’s no clean and native way to do that in Streamlit :slight_smile: but if you feel like hacking some CSS, then here’s a solution (toggle the ‘Show code’ expander):

1 Like
3

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:

  1. target just 1 radio widget from among all the radio widgets on the page?
  2. not bother about inspecting the css classes, which may change with time / streamlit versions?

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')

hrr

The only drawback with this method is that it adds a blank line for every invocation of the components.html statement.

Cheers

8 Likes
5

@arnaud what about changing the font size/family of radio options?

6

@Shawn_Pereira’s method seems to be the most flexible method for changing labels. See this discussion also for similar usage of components API or even latex.

1 Like
7

Hi @Shawn_Pereira and how I could change size for Taj and 4 seasons together along the title?

Thanks!

8

Hi @arnaud and how I could change size for Taj and 4 seasons together along the title?

Thanks!