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

[Chrisj]

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>

[Azercii]

You'd use css

input[type="submit"]
{
background: url(location here);
border: 0;
width: 180px;
height: 30px;
}

[Chrisj]

Thank you for your reply.

Do I have to name your code something in CSS?

[BuildMyWeb]

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

[CroNiX]

I believe he's trying to style the "Choose File" button that shows on a file input.

[Digitizer]

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 August 29, 2014 by Digitizer