How to customize the input type file button and text box

Question

I need to customize the file upload button from the below form.

fileupload cusomization

Now my fileupload button looks like fileupload image.I need to customize it like customize-file upload image

<form id="myform" action="" enctype="multipart/form-data">

    <input id="tele" type="file" name="filename" />
    <br/>
    <input class="btn" type="submit" value="Upload" />
</form>

possible duplicate of [How to style "input file" with CSS3 / Javascript?](http://stackoverflow.com/questions/3226167/how-to-style-input-file-with-css3-javascript) — Mr. Alien, Dec 21 '13 at 07:00

Nitin Varpe · Accepted Answer · 2013-12-21T08:25:11.127

7

After watching your image, i think u want input type as a textbox and not button.Can u try with keeping input type file as hidden and have textbox like this

 <input id="txt" type = "text" value = "Choose File" 
       onclick ="javascript:document.getElementById('file').click();">
      <input id = "file" type="file" style='visibility: hidden;' name="img" onchange="ChangeText(this, 'txt');"/>



function ChangeText(oFileInput, sTargetID) {

    document.getElementById(sTargetID).value = oFileInput.value;
}

You can easily apply css to this textbox

DEMO

edited Dec 21 '13 at 08:25

answered Dec 21 '13 at 07:36

Nitin Varpe

10,450
6
36
60

Yes its partially working.What i have to do to display the uploaded file name in the text box @ Nitin varpe – Rama Priya Dec 21 '13 at 07:45
It is not working.can you please update the fiddle with this code@Nitin varpe – Rama Priya Dec 21 '13 at 08:38
Its working but i am getting the filename along with the path(C:\fakepath\sample.docx) i just want to show the file name@Nitin varpe – Rama Priya Dec 21 '13 at 09:29
but on my machine its only giving file name. ok u can use substring to get the last string after \, shouldnt be any problem – Nitin Varpe Dec 21 '13 at 09:34
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/43659/discussion-between-rama-priya-and-nitin-varpe) – Rama Priya Dec 21 '13 at 09:45

CRABOLO · Answer 2 · 2013-12-21T07:08:08.887

1

Give the styles you want of course, but some examples of how to do this are provided below.

input[type="file"] {
       border: 4px solid red;
       border-radius: 40px;
}

or try

#tele {
     border: 4px solid red;
     border-radius: 50px;
 }

if for some reason neither of those works, you might need to be more specific like so

#myform #tele {
     border: 3px solid blue;
 }

edited Dec 21 '13 at 07:08

answered Dec 21 '13 at 07:02

CRABOLO

8,605
39
41
68

I need to customize type="file" button not submit button. @codehorse – Rama Priya Dec 21 '13 at 07:05
` – Bryan Elliott Dec 21 '13 at 07:07
Your code is not supporting for my requirement.I need to customize the choose file or browse button.can u update in fiddle – Rama Priya Dec 21 '13 at 07:18
I have updated my post with the image according to my requirement.i hope now you can able to understand my question.@codehorse – Rama Priya Dec 21 '13 at 07:30

score 0 · Answer 3 · answered Dec 21 '13 at 07:07

0

You can use background: url('image_url'); to add a button image

answered Dec 21 '13 at 07:07

Manolo

24,020
20
85
130

score 0 · Answer 4 · answered Dec 21 '13 at 07:29

0

To solve this you could enclose the input tag inside a label and style the label which would thus overlay the button.

answered Dec 21 '13 at 07:29

mumush

650
6
14

How to customize the input type file button and text box

4 Answers4