# Design the choose file button

**URL:** <https://community.hubspot.com/t/design-the-choose-file-button/9255>\
**Category:** CMS Development\
**Created:** [June 26, 2018, 9:45am UTC](https://community.hubspot.com/t/design-the-choose-file-button/9255 "2018-06-26T09:45:51Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![st\_ruangguru](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/st_ruangguru/32/57633_2.png) [@st\_ruangguru](https://community.hubspot.com/u/st_ruangguru)\
**Post date:** [June 26, 2018, 9:45am UTC](https://community.hubspot.com/t/design-the-choose-file-button/9255/1 "2018-06-26T09:45:51Z")

</div>

![modify.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/f/f/ff4e0c0f13e06d26e2d3c3beb9c5b8f3068ae152.png)

Do you guys know how to change from the default “choose file” into the modified “choose file”?

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [June 26, 2018, 2:00pm UTC](https://community.hubspot.com/t/design-the-choose-file-button/9255/2 "2018-06-26T14:00:05Z")

</div>

[@st\_ruangguru](https://community.hubspot.com/t5/user/viewprofilepage/user-id/64384)

There isn’t a super easy way to do that since it’s a native browser element that is defined by the brand of browser the user is in (just like select boxes or checkboxes). However, this is a good tutorial to use to accomplish what you’re looking for. There isn’t a HS way of doing what you’re asking but you could accomplish it with HTML, CSS, and JS modifications: [Styling & Customizing File Inputs the Smart Way | Codrops](https://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/)

Essentially, it will hide the file input and use the label as the trigger and new style for the file input. Since the file input button cannot be changed (consistently across all browsers) but “labels” can be, this is your best approach.

* * *

[tim@belch.io](mailto:tim@belch.io)

---

<div class="post-metadata">

**Author:** ![donnakat1](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/donnakat1/32/93765_2.png) [@donnakat1](https://community.hubspot.com/u/donnakat1)\
**Post date:** [August 8, 2018, 5:33pm UTC](https://community.hubspot.com/t/design-the-choose-file-button/9255/3 "2018-08-08T17:33:24Z")

</div>

I tried using this and it would not work. Is there some explanation or tutorial on how to use this in HubSpot?