Radio button with more padding between the options

[vbard]

Hi all,

I was wondering if you could help me with some tweaks to the radio button. I was asked to a couple of things:

1. to space out the options, i.e. have more blank space between the options
2. to align the option circle to the first line of the option answer, rather than having it in the middle.

Could you please advise how feasible these are?

Thanks.
VB

[randyzwitch]

Hi @vbard, welcome to the Streamlit community!

For your first question, here’s a way you can provide arbitrary CSS, which you can use to modify the radio-button selector (you’ll need to use developer tools in the browser to find the exact selector to modify):

Amend Streamlit's default colourway like on the spacy-streamlit App?

I did something like this the other day and it worked: st.markdown( """ <style> .reportview-container .markdown-text-container { font-family: monospace; } .sidebar .sidebar-content { background-image: linear-gradient(#2e7bcf,#2e7bcf); color: white; } .Widget>label { color: white; font-family: monospace; } [class^="st-b"] { color: white; font-family: monospace; } .st-bb { background-color: transparent; } .st-at { background-color: #0c0080; } footer { …

I’m not sure I understand the second question, could you provide a picture or a link to a site that does what you want?

Best,
Randy

[zephyap]

Hey @randyzwitch - I know it’s an old post, but I think I have an image which illustrates what @vbard was talking about

Currently the option circle for the second option is aligned to the middle of the text for the second option. I’d be keen to have the choice of aligning it with the top of the text instead