CSS not loaded on startup but on reload

[Ella]

When I run my app locally the CSS to change the st.selectbox focus color isn’t loaded, but when I refresh it is. Does anyone know why and how I can fix it?

CSS code:

.stSelectBox select:focus {
    border-color: #002c51
}

Including CSS to the page:

css_path = "style.css"
with open(css_path) as f:
    css = f.read()

st.markdown(f'<style>{css}</style>', unsafe_allow_html=True)

The selectbox I want to change:

st.selectbox(
        "Machine number:", options=[""] + machine_id_filters, index=UILogic.get_index(machine_id_filters, "machine_id"), key="machine_id"
    )

On startup:

After reload:

[tonykip]

Hi @Ella,

Thanks for sharing this question! Have you tried loading the CSS file as early as possible in your script to make sure it applied before any elements are rendered?

Another option could be to add the CSS code directly to the main page of the script rather than importing it.

[Ella]

Unfortunately I tried both but with the same result. The loading of the CSS is placed directly under the imports with this question, then there is a logic class and then the rest of the page elements. If I put the CSS in the page file itself the result is the same.

[shawngiese]

Try checking the developer tools in your browser to see which CSS rules are taking precedence. Maybe adding something like “!important” would help to get the rules you want to be applied first. Or maybe the focus is not being set until after the CSS rules load.

[Ella]

I do think I have the right selectors otherwise the CSS also wouldn’t load after the reload, same with “!important”. I’m not sure what you mean with the focus not being set, can you elaborate?

[Goyo]

You said “when I refresh” and later “After reload”. What are you doing exactly?

Running your code I don’t get to see the blue outline, no matter what I do.

[Ella]

I run the application with “streamlit run main.py” and then I have the red border, and if I click the refresh button in my edge browser I get the blue border.

[Goyo]

I do the same and the blue border never appears for me.

Not that I had to define a couple of undefined names (machine_id_filters and UILogic IIRC) in order to make your code run. You will have them defined in a different way that may trigger different behavior.

[Ella]

I’m not sure if that has any impact. “machine_id_filters” are a few random number to show options, and the UILogic.get_index is a method to get the index of the selected option so it would show the value after an option is selected and the machine_id_filters en filtered to only inlcude options that match the already selected filters.

Is there a different way to get the borders blue that does work for you? Maybe I can try that for me and see what happens. I got the current selectors based on this thread: Can I change the color of the selectbox widget? - #2 by andfanilo

[Goyo]

@Ella

I’m not sure if that has any impact.

I am not sure either, but the most (only?) obvious difference between what I run and what you run is the code I cannot see, so in my view it is the main suspect.

@Ella

Is there a different way to get the borders blue that does work for you?

No, not just when the selectbox has the focus. Unfortunately my css sucks and I couldn’t find any example.

But if you can see the blue border you must be almost there. I am still missing a piece, though, because I cannot see it.

[Ella]

Could it be that I get a blue color because I set the primary color to that blue in the config.toml file like this?

[theme]
primaryColor="#002c51"

[Goyo]

Of course, but that doesn’t explain why you don’t see it on startup.

[Ella]

And with this extra information you also don’t know a way to fix it?

[Goyo]

The extra information just makes less clear what the actual problem is.

• Is your CSS working only after a refresh? (It never works for me)
• Is your theme working only after a refresh? (It always works for me)
• Is it a mix of the above?
• Is the rest of your code related to it (you seem to believe it is not but we don’t know for sure)
• …

[Ella]

My CSS is only working after a refresh, the same goes for my theming. I don’t think the rest of my code is related because it’s either logic code or different streamlit element for on the page unless maybe the way I created the app or maybe the architecture which looks like this: