How to create a Custom Browse button | Techbirds

I am posting this blog because I have faced an issue to design input type file button.

Default browse button doesn’t look so good but we can customize it.

We can do this through javascript.

->First , hide the input type file button.

->Create your custom button.

->onclick Event of custom button call “javascript:document.getElementById(‘id_of_input_type_file_button’).click();

->Therefore, when we click custom button , it actually triggers to input type file button.

Here is the  Working Demo link

HTML

Default browse button

Custom browse button

CSS

.btn { background: #4679bd; color : #fff; font-size : 20px; border : 2px solid #4679bd; border-radius : 5px; padding : 7px 10px; } p{ font-family : Arial; text-decoration: underline; }

967 total views, 1 views today

Share this On