CSS Styling the color of st.chat_input

Using Streamlit
1

Hey everyone, I am actually quite baffled that I did not find this on the forums yet, since there is a CSS styling guide on virtually anything.

I am faced with the issue that my application itself is rather dark and the background of st.chat_input is black. Instead, I want to turn the transparency down to 0 and make the box white. Sadly, I am not able to understand how this is done with CSS.

Any help is super appreciated. Thanks!

2

Here is a nice guide to get those CSS tweaks:

3

Thanks for sharing this - I am a big fan of teaching a man to fish. Sadly, the method described in the video does not work for st.chat_input as it cannot be put into containers.

4

I actually found it - the problem was the placing of my code inside “prompt := st.chat_input()” instead of beneath it.

m = st.markdown("""
    <style> 
    .stChatInputContainer > div {
    background-color: #fff;
    }
    </style>
    """, unsafe_allow_html=True)

worked.

1 Like
5

If someone now has an idea to change the font color inside as well - please help. Because it seems to not be part of the same object

EDIT: nvm got this too with:

def make_chattext_dark():
    return """
        <style>
        [data-testid="stChatInput"] {
        color: #000;
        caret-color: #000;
        }
        </style>"""
1 Like
6

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