Home/ Questions/Q 897657
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-15T14:55:06+00:00

I want to have image button for browse and upload I have textbox using

  • 0

I want to have image button for “browse” and “upload”

I have textbox using the following code:

CSS

   .uploadpathdiv
    {
     margin:0;
     height:44px;
     width:464px;
     background:url('images/img-upload.png') no-repeat bottom;
    }


.uploadpath
{
 background:none;
 border:none;
 width:400px;
 height:40px;
 margin:0;
 padding: 2px 7px 0px 7px;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:11px;
}

HTML

<div class="uploadpathdiv">
<input class="uploadpath" name="path" type="text" />
</div>
<img src="/themes/scaccarium/images/button-upload.png" />
<img src="/themes/scaccarium/images/button-browse.png" />

The image code is for both “browse” and “upload” button.

Please help me to correct the above code so that when i press the browse button i get “file selection option” as you see when you use <input type = "file" name="browse">. Secondly, the path of the file must be shown in the textbox above.

Thirdly when i press the upload button the file should be uploaded

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It is not possible to target the “browse…” button of file upload controls via CSS.

    A HTML-based workaround can be found here: Styling an input type=”file”
    not sure whether it can do exactly what you need, but I think that’s the closest you can get.

    If you want full control over the control (no pun intended) you would have to use a Flash-based uploader like SWFUpload. Note that those uploaders work a bit differently from a normal file upload control, so you may need to change your workflow to get it to work, and decide whether it’s worth the effort.

    • 0