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:
- target just 1 radio widget from among all the radio widgets on the page?
- 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')
The only drawback with this method is that it adds a blank line for every invocation of the components.html statement.
Cheers