Upgrading radio component with CSS

Using Streamlit
1

I’m trying to customize st.radio with CSS

Steps to reproduce

Code snippet:

CSS

div.row-widget.stRadio > div {
 flex-direction: row;
 align-items: stretch;
}

div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"] > div:first-child{
   display: none;
}

div.row-widget.stRadio > div[role="radiogroup"] > label[data-baseweb="radio"] {
 background: transparent;
 padding-right: 10px;
 padding-left: 4px;
 padding-bottom: 3px;
 margin: 4px;
 border: 1px solid #249ded;
}

input[type="radio"] :checked + label[data-baseweb="radio"] {
 background: red !important;
}

Expected behavior:

I expect that st.radio elementwill appear as usual buttons and after the selected button will change background color.

I suppose the problem with the last CSS. Please help

Actual behavior:

Labels look like a buttons but don’t change color after mouse click on "button’

Debug info

  • Streamlit version: 1.26.0
  • Python version: 3.10
  • Using PipEnv
  • OS version: Windows
  • Browser version: Chrome

If you propose option_menu - this is slow…and sometimes raises an error: “Your App is having trouble loading the streamlit_option_menu.option_menu component” if the internet is slow…

Thanks in advance.

2

I think there’s a small issue in the CSS selector for styling the selected radio button label. The space between input[type=“radio”] and :checked should not be there. Try if that works

3

Hey @SergeyPriem ,
this should work for you in last CSS…

input[type="radio"]:checked + div {
 background: red !important;
}

as, the label[data-baseweb='radio] is the parent element of input, so it will not work, the 3rd child is the original label of the input which is a div tag.
I hope it will work for you.

image

and then, adjust the width and padding accordingly to fill properly.

4

Thank you very much! IT WORKS!

1 Like
5

Unfortunately, it didn’t help. But a solution is found. Thank you

1 Like
6

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.