Design the choose file button

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

@st_ruangguru

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

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

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