Can I remove the big box behind a chat input at the bottom of a Streamlit website?

Question

I'm currently building a website that involves a chatbot, and in the chat message input, there's a black box behind it that is covering part of my background image. Is there a way to remove it? I tried finding it at the devtools but it just wasn't working.

Here's the code I'm using for that

#import packages
from dotenv import load_dotenv
import openai
import streamlit as st

@st.cache_data
def get_response(user_prompt):
    response = client.responses.create(
            model = "gpt-4o", #Selects the model that you want to use (use the cheap one)
            input = [ #List that keeps track of convo history as a list
            {"role" : "user", "content": user_prompt} #Prompt
            ],
            temperature = 0.7, #How creative the answer will get
            max_output_tokens = 100  #Limit response length 
        )   
    return response
#Load enviroment variables from the .env file
load_dotenv()

#Initialize the OpenAI Client
client = openai.OpenAI()
title = st.empty()
subtitle = st.empty()
title.markdown("<h1 style='text-align: center;'>Hello There!</h1>", unsafe_allow_html=True)
subtitle.markdown("<h2 style='text-align: center; '>How can we help you?</h2>", unsafe_allow_html=True)
page_bg_image = """
<style>
[data-testid="stAppViewContainer"] {
    background-image: url('https://snu.edu.in/site/assets/files/18543/gears-technological-elements-digital-blue-background-symbolizing-network-innovation-communication-3d-rendering.1600x0.webp');
    background-size: cover;
}
[data-testid="stHeader"]{
background-color: rgba(0,0,0,0);
}
[data-testid="stBottomBlockContainer"] {
    background: rgba(0,0,0,0);
}
</style>
"""
st.markdown(page_bg_image, unsafe_allow_html=True)
#Add a text input box for the user prompt
user_prompt = st.chat_input("Enter your prompt: ")
if user_prompt:
        title.empty()
        subtitle.empty()
        st.chat_message("user").write(user_prompt)
        with st.spinner("Generating response..."):
            response = get_response(user_prompt)
#Print the response
        st.chat_message("assistant").write(response.output[0].content[0].text)

The code you've attached is not reproducible. Please edit and add the missing pieces of code to be able to get some help stackoverflow.com/help/minimal-reproducible-example — Ajeet Verma
– Ajeet Verma, Commented Sep 14 at 6:14
I don't see any chat prompt in your code - so it impossible to help you. — furas
– furas, Commented Sep 14 at 14:35
There is <div> between stBottom and stBottomBlockContainer which has color and you have to use [data-testid="stBottom"] > div {...} instead of [data-testid="stBottomBlockContainer"] {...} — furas
– furas, Commented Sep 14 at 22:24
@uzn4v1, I see you've edited and provided the reproducible code. You may wait for the question to be opened again, or you could post it as a new question. — Ajeet Verma
– Ajeet Verma, Commented Sep 16 at 1:48

Ajeet Verma · Accepted Answer · 2025-09-20 02:50:38Z

One way to get the expected outcome is to use st.text_input() instead of st.chat_input().

st.chat_input is “hard-coded” with Streamlit’s default container, which is why your earlier CSS hacks weren’t enough.

and by switching to st.text_input, you have full control over placement and styles, so you can overlay it on top of your background image seamlessly.

Here's the complete solution:

import os
from dotenv import load_dotenv
import streamlit as st
from huggingface_hub import InferenceClient

# Load environment variables
load_dotenv()

# Initialize client
client = InferenceClient(
    provider="groq",
    api_key=os.getenv("GROQ_API_KEY")
)


def get_response(input_prompt: str) -> str:
    """
        Send a user prompt to the model and return the response.
    """

    result = client.chat.completions.create(
        model="openai/gpt-oss-20b",
        messages=[
            {"role": "user",
             "content": input_prompt}
        ],
        temperature=0.7,
        max_tokens=100
    )

    return result.choices[0].message.content


# --- UI Styling ---
title = st.empty()
subtitle = st.empty()
title.markdown("<h1 style='text-align: center;'>Hello There!</h1>", unsafe_allow_html=True)
subtitle.markdown("<h2 style='text-align: center; '>How can we help you?</h2>", unsafe_allow_html=True)

page_bg_image = """
<style>
[data-testid="stAppViewContainer"] {
    background-image: url('https://snu.edu.in/site/assets/files/18543/gears-technological-elements-digital-blue-background-symbolizing-network-innovation-communication-3d-rendering.1600x0.webp');
    background-size: cover;
    background-attachment: fixed;
}

/* Hide the default chat input */
[data-testid="stChatInput"] {display: none !important;}

/* Floating custom input box */
[data-testid="stTextInput"] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24px;
    width: min(900px, 90%);
    z-index: 9999;
    padding: 0 !important;
}
[data-testid="stTextInput"] .stTextInput > div {
    background: rgba(255,255,255,0.08) !important;
    border-radius: 12px;
    padding: 8px 12px;
}
[data-testid="stTextInput"] input {
    background: transparent !important;
    color: black !important;
    border: none !important;
    outline: none !important;
}
</style>
"""
st.markdown(page_bg_image, unsafe_allow_html=True)


# Use a text_input as the submit box (press Enter to submit)
user_prompt = st.text_input("", placeholder="Enter your prompt:", key="user_prompt")

if user_prompt:

    # Clear title/subtitle after first input
    title.empty()
    subtitle.empty()
    st.chat_message("user").write(user_prompt)

    with st.spinner("Generating response..."):
        response = get_response(user_prompt)

    st.chat_message("assistant").write(response)

output:

I've used the huggingface model to test it out, you can keep the openai client as it is.

Mohd Aasif · Accepted Answer · 2025-09-14 06:18:27Z

-3

Force the input box background to transparent and remove any shadows/borders that look like a "black box":

answered Sep 14 at 6:18

Mohd Aasif

12 bronze badges

Collectives™ on Stack Overflow

Can I remove the big box behind a chat input at the bottom of a Streamlit website?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related