Can I style the selected time_input option?

[robotj]

Hello,

is it possible to add a custom style (font weight and color) to the selected time in st.time_input?

Even your documentation shows the selected time as very dim.

Can I make it brighter using CSS?

I have tried to add styles like

il > div [aria-selected="true"] {
    color: #aac1fa;
}

but haven’t figured out how to add the style properly. It seems the problem is the selected il element changes whenever the st.time_input is created, so the styles set in my (one-file application) app.py is overwritten.

Thanks!
RJ

[dataprofessor]

Hi @robotj

Could you try changing il to li

If the above correction did not work, looking at the CSS element name, perhaps you could also try the specific element ID bui18val-34 as shown in the screenshot:

The above element name was obtained in Google Chrome by clicking on View > Developer > Inspect Elements

Hope this helps!

[robotj]

Hello @dataprofessor,

thank you for your reply. Sorry about the typo, the selector was correct in my code, I made a mistake when writing the original post. The CSS selector as posted in my original question does not work unfortunately.

I do not understand your suggestion with the element ID. I do not know beforehand which selector to choose. I would like the value in the dropdown menu which was last selected to be of different color. Now it is black(-ish) and it is hard to read.

Also the ids change everytime the dropdown is opened/closed.

Cheers
RJ

[blackary]

I reported this as a bug here Time input selected time hard to see in dark mode · Issue #7436 · streamlit/streamlit · GitHub

Here’s a workaround for now

import streamlit as st
from datetime import time

st.time_input("Time input", value=time(0, 15))

st.markdown(
    """
<style>
    li div[aria-selected="true"] {
        color: white !important;
    }
</style>
            """,
    unsafe_allow_html=True,
)

NOTE: This only works well in dark mode – I haven’t figured out a general way to change this to work in dark and light mode, but if you’re only using dark mode, this should do the trick.

[robotj]

Thank you @blackary, this has worked!