it_is_a_literature it_is_a_literature - 4 months ago 26
Javascript Question

How to customize file upload object with special text in the box?

<input type="file" id="file">

The simple html label created the below box and characters inside and around it.

enter image description here

Now i want to customize the logo into the below.

enter image description here remove characters
No file selected.
. change characters
in the box into


You have 2 options to do it:

Option 1: Use label

		display: block;
		width: 50px;
		padding: 5px;
		line-height: 30px;
		background: #e0e6eb;
		cursor: pointer;
<label for="file">Upload</label>
<input type="file" id="file" style="display: none;">

Option 2: You can use jQuery.

I usually use this way for my website. It's very simple. Assume you have 2 elements. A, B.

Step 1: You will click A - $('A').click

Step 2: Trigger B - $('B').trigger('click').

A is an html element

B is <input type="file" id="file">

That's it.