CSS Hack: Add Icon to Streamlit's date input

Using Streamlit
,
1

Hi Guys!

Just wanna share a quick CSS tip to display calendar icon inside default date input calendar widget of streamlit.

Lately, I was looking for third party date component just because of the look and feel. However, I’m convinced that streamlit’s calendar widget is beautiful when its opened. But when it is closed, it makes no difference to a text input field. So I’ve decided to do some css and you can use same code to achieve the below result.

Before:
image

After
image

Below is the code:

st.markdown("""<style> [data-testid="stDateInput"] [data-baseweb="input"]:before {
    content: url(https://i.imgur.com/pIZPHar.jpg) !important;
    padding-top: 5px !important;
    padding-left: 7px !important;
}</style>""", unsafe_allow_html=True)

If you copy paste as it is, if it is in vscode, make sure whole thing is in single line. I recommend to maintain a seperate css file and put this code inside that file. In case if you don’t know you can read that css file in your streamlit page as below:

image
image769×118 6.92 KB

Happy coding!

4 Likes
2

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