0

i'm making a small photo upload website and I am trying to style the 'select file' button for the upload page. On the <input type="file" name="uploadedfile"><br> line I have tried adding a class to it and style it, but all that does it style the background, not the button itself. Does anyone know how to style the button, and keep the filename there? I want to style it kinda like the button and progressbar in this pic http://prntscr.com/3jcwmr

blackhawk338
  • 386
  • 2
  • 3
  • 15
  • You can't. You will have to style a different button and when that button is clicked, you fire the click event to the actually upload button – David Lin May 15 '14 at 06:21
  • 1
    show us what you have tried so far .... only then it would be possible to help .... a fiddle would also help ... – Vicky May 15 '14 at 06:21
  • 3
    A lot of information can be found here: http://stackoverflow.com/questions/572768/styling-an-input-type-file-button – RossBille May 15 '14 at 06:23
  • @ross thanks for that link, it's very useful – blackhawk338 May 15 '14 at 06:26

1 Answers1

0

The workaround usually done for this is hide the uploadfile button. Create a customized good looking image or button and then write a javascript which onclick of this customized image or button actually clicks the hidden uploadfile button.

sushil bharwani
  • 29,685
  • 30
  • 94
  • 128
  • so if I do it this way, would I need to use `document.getElementById("files").click();` in the javascript to click the button when the other button is clicked? Also how would I get the filename to appear next to the custom button? – blackhawk338 May 15 '14 at 06:23