# Hiding File Input UI

**URL:** https://forum.kirupa.com/t/hiding-file-input-ui/640953
**Category:** web dev
**Created:** [October 28, 2019, 5:25am UTC](https://forum.kirupa.com/t/hiding-file-input-ui/640953 "2019-10-28T05:25:42Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![clo](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/clo/32/9759_2.png) [@clo](https://forum.kirupa.com/u/clo)
#### Post date: [October 28, 2019, 5:25am UTC](https://forum.kirupa.com/t/hiding-file-input-ui/640953/1 "2019-10-28T05:25:42Z")

</div>

I wanted to overwrite the typical “Choose file” button of the `<input>` and got the below code to hide the standard and replace it with a Semantic-UI `<Button>`. However, I realised in hiding the original input button, I also hide the display of the file name (e.g. Screenshot…10.43.17PM). How might I hide the original button, but retain and manipulate the display of the selected file name?

 ![36%20PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/e/e6666cdc07e8b666686f1f2c0b634f5e9b594952.png)  
 ![59%20PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/a/a0889c1cb887e0e3b959c48dafc81f781e94b2ce.png)

---

<div class="post-metadata">

### Author: ![gNeandr](https://avatars.discourse-cdn.com/v4/letter/g/bcef8e/32.png) [@gNeandr](https://forum.kirupa.com/u/gNeandr)
#### Post date: [October 29, 2019, 12:51pm UTC](https://forum.kirupa.com/t/hiding-file-input-ui/640953/2 "2019-10-29T12:51:26Z")

</div>

Have you checked this page?  
Roll down for the examples  
[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Examples](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Examples)