Changing the default text "Choose an option" from a multiselect widget

Is there a simple solution to change the default text (“Choose an option”) from the multiselect widget? I would like to translate the default text to German.

Thanks!

Hi @NiklausBal, welcome to the Streamlit community!! :wave: :partying_face:

Streamlit does not expose the option to change the placeholder text for st.multiselect. As such, there is no native option to change the placeholder because it is hard-coded in the frontend.

However, here is an unofficial CSS hack. I used a CSS selector to first make the default placeholder invisible. Next, I use another CSS selector to set the value of the placeholder. This CSS is injected into the app with st.markdown.

Solution

1 Insert the following snippet into your app:

import streamlit as st

change_text = """
<style>
div.st-cs.st-c5.st-bc.st-ct.st-cu {visibility: hidden;}
div.st-cs.st-c5.st-bc.st-ct.st-cu:before {content: "Wähle eine Option"; visibility: visible;}
</style>
"""
st.markdown(change_text, unsafe_allow_html=True)

2 Replace the German text Wähle eine Option :point_up: with the text of your choice.

Here’s an example app and the corresponding output:

Code

import streamlit as st

change_text = """
<style>
div.st-cs.st-c5.st-bc.st-ct.st-cu {visibility: hidden;}
div.st-cs.st-c5.st-bc.st-ct.st-cu:before {content: "Wähle eine Option"; visibility: visible;}
</style>
"""
st.markdown(change_text, unsafe_allow_html=True)

options = st.multiselect(
     'What are your favorite colors',
     ['Green', 'Yellow', 'Red', 'Blue'],)

st.write('You selected:', options)

Output

Are you able to reproduce this behavior?

Happy Streamlit-ing! :balloon:
Snehan

Inspiration: How can I replace text with CSS?

1 Like

Hi @snehankekre

Thank you for your solution! It works really well.

2 Likes