it_is_a_literature it_is_a_literature - 1 month ago 6
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

1.to remove characters
No file selected.
.

2.to change characters
Browse...
in the box into
upload
.

Answer

You have 2 options to do it:

Option 1: Use label

	label{
		display: block;
		width: 50px;
		padding: 5px;
		line-height: 30px;
		background: #e0e6eb;
	}
	label:hover{
		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.

Comments