css = '''
<style>
[data-testid='stFileUploaderDeleteBtn'] {
margin-top: 4px;
}
[data-testid='stbaseButton-secondary'] {
margin-bottom:-1px;
}
[data-testid='stbaseButton-secondary'] {
text-indent: -9999px;
line-height: 0;
}
[data-testid='stbaseButton-secondary']::after {
line-height: initial;
content: "Browse";
text-indent: 0;
}
</style>
'''
st.markdown(css, unsafe_allow_html=True)
st.file_uploader('upload_file:')
st.button("Save")
Perhaps it works if you make the selector more specific, e.g. by using something like
[data-testid='stFileUploaderDropzone'] > [data-testid='stbaseButton-secondary'] {
...
}
Playing off @raethlein’s suggestion:
import streamlit as st
css = """
<style>
[data-testid='stFileUploaderDropzone'] > [data-testid='baseButton-secondary'] {
margin-top: 4px;
margin-bottom: -1px;
text-indent: -9999px;
line-height: 0;
&::after {
line-height: initial;
content: "Browse";
text-indent: 0;
}
}
</style>
"""
st.markdown(css, unsafe_allow_html=True)
st.file_uploader("upload_file:")
st.button("Save")
I assume this is close to what you were going for
Thanks @raethlein and @blackary will try this solution. so based on root element we can access elements correctly.
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.