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

[NiklausBal]

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!

[snehankekre]

Hi @NiklausBal, welcome to the Streamlit community!!

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 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!
Snehan

Inspiration: How can I replace text with CSS?

[NiklausBal]

Hi @snehankekre

Thank you for your solution! It works really well.

[satyabansahoo2000]

Anything like this for selectbox?
Also, how did u get those tags like div.st-cs.st-c5.st-bc.st-ct.st-cu? If you can explain that, it will be great help

[YoungXu06]

It’s not working for the lastest version streamlit…

[fanurs]

On your browser, open up “developer tools” (e.g. F12 on Chrome). Then, inspect the element that corresponds to the text “Choose an option”. The HTML class is what you are looking for. Classes are separated by spaces in HTML. Join them with dots (.) in change_text.

Below is what I have based on Streamlit v1.15.2 (@YoungXu06):

This is really a hard-coded hack. I would try and see if it’s possible to contribute a new feature in the near future.

[digoplbr]

@snehankekre

div.st-cs.st-c5.st-bc.st-ct.st-cu {visibility: hidden;}

Hello. I am not a front end expert but my HTML class keep changing it’s tag name every time I refresh the page. Is there a work around for that ?

[digoplbr]

I tested but my div name keeps changing on every refresh. Any way to make it more dynamic ?

[mathcatsand]

If you are okay with changing the default text of every multiselect on the page you can do it as in this example. You can also add a few extra conditions to isolate it to a particular multiselect if the rest of your layout is stable enough.

(Check out the second tab “multiselect” on the page. The code is embedded in the page.)

https://mathcatsand-examples.streamlit.app/default_text

[mathcatsand]

@SergioAntonio I saw you just liked this. FYI there is a PR on GitHub to add placeholder as an optional keyword parameter for multiselect. So you will be able to do this natively very soon.