While using custom CSS to customize file uploader it changes the appearance of other buttons in app as data-testid is same for st.file_uploader and st.button . can't we avoid this ?I checked with class but class are also same

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")

image

Perhaps it works if you make the selector more specific, e.g. by using something like

[data-testid='stFileUploaderDropzone'] > [data-testid='stbaseButton-secondary'] {
...
}
1 Like

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

2 Likes

Thanks @raethlein and @blackary will try this solution. so based on root element we can access elements correctly.

2 Likes

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