circuit

How to style <input/> field in React

Style that ugly generic Choose File button in React or any other framework




Photo by Pankaj Patel on Unsplash

We've all needed to upload files to our apps, and if you are not using react-dropzone, most likely, you're stuck with the following:

ugly 90's button

Generated by:

<input type="file" onChange={()=>doSomething}/>

To solve the issue, and add a modern look and feel to the button we will add the <label> tag above it:

<label htmlFor={'upload-button'}>
    <div className={classes.chooseFile}>
        <SomeIconElement style={{marginRight: 10}}/> Upload File
    </div>
</label>

notice that we have added htmlFor property to the <label> tag, the contents of which we will now add to the <input> element with property id such that browser knows what the label is for:

<input type="file" id="upload-button" style={{display: 'none'}}
       onChange={handleChange}/>

Two things stand out in this element — first, we have a matching id property as we do on the label htmlFor element; second, we added inline style to hide this button.

The final result for me looked like this:

slightly cooler-looking buttonslightly cooler-looking button

Ps. The CSS for the styled button that centers the icon and the text:

chooseFile:{
    display: 'flex',
    justifyContent: 'flex-start',
    alignItems: 'center',
    flexDirection: 'row',
    width: '20vw',
    padding: 5,
    borderStyle: 'solid',
    borderWidth: 1,
    borderColor: 'green',
    borderRadius: 5,
    color: 'green',
}



Continue Learning