Apply css to button

🎈 Using Streamlit
1

Hello

I have this play button and I would like to change the height of the button. I have search online and tried using the st.markdown method but it seems like the styling apply to all of my button in the page.

Do anyone know what is wrong? What does the first-child refer to?

btn_play.markdown(“””<style>div.stButton>button:first-child {height: 3em;}</style>“””, unsafe_allow_html=True)
btn_play.button(“PLAY”)
2

Hello @qt.qt,

The problem is that your css selector will select every button which is the first child of a div the class stButton, not the first such button on a page. In generate, the :first-* selectors refer to “the first child of a given element”. One option, which takes a bit of fiddling, is to select the nth element on the page, and style the button inside of that. For example, this styles only the PLAY button, but not the other two, because it’s a child of the 3rd element with the class element-container

import streamlit as st

st.markdown(
    """<style>
        .element-container:nth-of-type(3) button {
            height: 3em;
        }
        </style>""",
    unsafe_allow_html=True,
)

st.button("STOP")

st.button("PLAY")

st.button("PAUSE")
1 Like
3

Hey @blackary

Thank you for the reply. But how to find out
what is the nth-child position of an element given that I have other text Input and columns on the web app?

4

@qt.qt Unfortunately, I can’t think of a good way to do that programmatically, so if you used this method you would simply have to change the number until it was the correct button. Definitely not an ideal solution.

5

Yara thank you so so much. Nafas me pori va khot. os me ta pada kary.

1 Like
6

Hi @blackary,

Is there a way to use python variables inside the

When I try and put f before the triple quotes it bugs out.

Thanks for that example though works great the last thing I need is the variables.

7

Hi @zimmer44, the trick is that if you have an f-string and you have {}s in it, it will assume they’re supposed to contain a valid python expression. The way around it is to double them up. For example:

height = 10

st.markdown(
    f"""<style>
        .element-container:nth-of-type(3) button {{
            height: {height}em;
        }}
        </style>""",
    unsafe_allow_html=True,
)