How to customize the input type file button and text box
21,937
Solution 1
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
Solution 2
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;
}
Author by
Rama Priya
Updated on December 21, 2020Comments
-
Rama Priya over 3 years
I need to customize the file upload button from the below form.
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>
-
Rama Priya over 10 yearsI need to customize type="file" button not submit button. @codehorse
-
Bryan Elliott over 10 years
<input type="file"
is not the "button",.. It is the input text box. -
Rama Priya over 10 yearsYour code is not supporting for my requirement.I need to customize the choose file or browse button.can u update in fiddle
-
Rama Priya over 10 yearsI have updated my post with the image according to my requirement.i hope now you can able to understand my question.@codehorse
-
Rama Priya over 10 yearsYes its partially working.What i have to do to display the uploaded file name in the text box @ Nitin varpe
-
Rama Priya over 10 yearsIt is not working.can you please update the fiddle with this code@Nitin varpe
-
Rama Priya over 10 yearsIts 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
-
Nitin Varpe over 10 yearsbut on my machine its only giving file name. ok u can use substring to get the last string after \, shouldnt be any problem
-
Rama Priya over 10 years