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

Using Streamlit
2

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

image
image961×803 21.9 KB

Are you able to reproduce this behavior?

Happy Streamlit-ing! :balloon:
Snehan

Inspiration: How can I replace text with CSS?

3 Likes