Creating a nicely formatted search field?

Using Streamlit
,
2

Hello @mzeidhassan,

Here is the closest I could go :

image
image973Ă—432 2.2 KB

  • I use unsafe_allow_html small hack to load custom CSS and change text color, background color and button radius. I think custom CSS is being internally discussed so we can expect some new things soon :slight_smile:
  • For horizontal layout of those widgets, there’s an issue for this, I’ll link your use case to it.
  • That magnifying glass in the Streamlit button…I have no idea yet how to inject material-icon or a png in the button legend, if you’re interested in that you may write an issue on Github :slight_smile:
  • When you say “search field”, do you want autocompletion too for your text_input ? The API could look like st.text_input(“Search”, autocomplete=function())…that could also be interesting

Anyway 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")
24 Likes