Hello everybody,
Is there a way to create a nicely formatted search field in Streamlit and center it on the home page?
I am thinking of something as shown in the attached screen shot.
If this widget is not available yet, I think it would be a great addition for any data explorer app.
Any thoughts on this?
Thanks
Hello @mzeidhassan,
Here is the closest I could go :
text_input ? The API could look like st.text_input(“Search”, autocomplete=function())…that could also be interestingAnyway source code
style.css
body {
color: #fff;
background-color: #4F8BF9;
}
.stButton>button {
color: #4F8BF9;
border-radius: 50%;
height: 3em;
width: 3em;
}
.stTextInput>div>div>input {
color: #4F8BF9;
}
app.py
import streamlit as st
def local_css(file_name):
with open(file_name) as f:
st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
def remote_css(url):
st.markdown(f'<link href="{url}" rel="stylesheet">', unsafe_allow_html=True)
def icon(icon_name):
st.markdown(f'<i class="material-icons">{icon_name}</i>', unsafe_allow_html=True)
local_css("style.css")
remote_css('https://fonts.googleapis.com/icon?family=Material+Icons')
icon("search")
selected = st.text_input("", "Search...")
button_clicked = st.button("OK")
@andfanilo This is super-awesome indeed. Thanks a million for taking the time to write this. I really appreciate it. 
autocomplete would be awesome for sure.
Thanks again!
Hi Fanilo!
thanks for sharing this.
I’ve uploaded the CSS in the root folder yet I can’t make this work locally (I’ve got a blank screen when I launch Streamlit)
Is there anything I need to add to the code above?
Thanks, Charly
What a cool solution, thanks!
But I’m trying to create 3 buttons (one to approve, one to reprove and to ignore) in an annotation tool.
I’d like to have a green button to the approve one, and a red button to the reprove one. Is it possible to change theirs colors?
Thanks, Diogo.
@Charly_Wargnier did you manage do make it work ? Still works on my side, make sure your app.py and styles.css are in the same folder.
Sooo…it’s getting tricky, you can go in the Inspector tab of your web browser, find the element you want to style, copy its CSS path it in the stylesheet and then edit the colors in the stylesheet :
import streamlit as st
def local_css(file_name):
with open(file_name) as f:
st.markdown(f'<style>{f.read()}</style>', unsafe_allow_html=True)
local_css("style.css")
button_clicked = st.button("OK")
button_clicked = st.button("KO")
button_clicked = st.button("ignore")
body {
color: #fff;
background-color: #4f8bf9;
}
div.element-container:nth-child(2) button {
color: blue;
border-radius: 50%;
height: 3em;
width: 3em;
}
div.element-container:nth-child(3) button {
color: red;
border-radius: 50%;
height: 3em;
width: 3em;
}
div.element-container:nth-child(4) button {
color: grey;
border-radius: 50%;
height: 3em;
width: 3em;
}
this is not a very viable long term solution though…
we are currently experimenting with Custom Components which will enable you to create your own components into Streamlit, that means you should be able to style your own button (and maybe a search box with auto suggestion too) and change it’s color when desired from Python (if we correctly define the HTML/CSS part). I’ll keep this use case in mind and see if I can make you one when it’s out 
Thanks andfanilo, I will give it a try!
Thanks a lot
Hi @andfanilo
Is there any possibility you could share the code for the autocomplete function?
Thanks,
Steve
hi thanks for sharing,
however i cant get it works , it thorw an error that
StreamlitAPIException : set_page_config() can only be called once per app, and must be called as the first Streamlit command in your script.
For more information refer to the docs.
Traceback:
I cannot find in css which part use this config
and in my app code
i have this
st.set_page_config( page_title=" Testpage", page_icon=":shark", # EP: how did they find a symbol? layout="wide", initial_sidebar_state="expanded", )
in my app.py app
help me @ andfanilo
So what about text-input? div.element-container: nth-child (2) text-input ???
Considering you are having an app.py file for your streamlit app code
import streamlit as st
def main():
"""
Heart of the streamlit App
"""
# Some Basic Configuration for StreamLit
st.set_page_config(
page_title="Your Awesome App Title",
page_icon="path_of_your_favicon",
layout="wide",
initial_sidebar_state="auto",
)
pages = ["Home", "Page 1", "Page 2"]
p_choice = st.sidebar_selectbox("Menu", pages)
if p_choice == "Home":
local_css("style_1.css") # Relative path of the css file
st.title("Some Relevant Info")
.
.
.
else if p_choice == "Page 2":
local_css("style_2.css")
st.title("Title of Page 2")
.
.
.
def local_css(file_name):
with open(file_name) as f:
st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
if __name__ == "__main__":
main()
Either store the style_1.css, style_2.css, etc css files in the same directory as the app.py or give the relative path if you prefer something like assets\css\style_1.css
Hi everybody,
I have managed to change the default parameters of text input.
Yet, I was wandering which is the class ‘responsible’ for text input that would allow for a typewriter effect inside the text input element. 
.
Inspecting the code, I can notice
So the final question will be:
Which is the best, “< div>” or “< input >” to insert the typewriter effect.
How to add a new class for the animation, in addition to the various st-4 st-b7 and so on.
