Jump to content

How can I add an image to an input id="file" ?


Chrisj

Recommended Posts

I'm using an Upload Form and I believe this line of code, shown below, is what the attached image shows (see attached image).

 

How can I add a different image button to replace the "Choose File" button that's currently there?

 

Also, how can I put some space between the Choose File button and the "No File Chosen" function?

 

Thanks

<div class='controls'>
<input id="file" type="file" name="file" />
<?php //echo form_error('file');   ?></div>
Link to comment
Share on other sites

  • 1 month later...

chris, please include all of the code for this form.  i assume, as did Azercii, that you are attempting to change the image attributed to your submit button.  but that isnt clear because you havent shown the code for that.  

 

please include the function as well if you want help styling it

Link to comment
Share on other sites

  • 2 weeks later...

You need to wrap it in a span with a label

 

define a css style in your page, and paste the following code (not my code, searched on internet for it)

<style type="text/css">
label.browseButton{
    overflow:hidden;
    position:relative;
    width:100px;
    height:30px;
    background: url('path_of_image.extension') center center no-repeat;
    /* change the path of image with "path_of_image.extension" */
    /* center center no-repeat are optional */
}

label span input{
    z-index: 1000;
    line-height: 0;
    font-size: 50px;
    position: absolute;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}
</style>

and change your file button code like this

<label class="browseButton">
    Browse File
    <span>
      <input type="file" id="file" name="file" />
    </span>
</label>
Edited by Digitizer
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.