Jump to content


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

  • Please log in to reply
5 replies to this topic

#1 Chrisj


    Advanced Member

  • Members
  • PipPipPip
  • 189 posts

Posted 26 June 2014 - 05:14 PM

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?



<div class='controls'>
<input id="file" type="file" name="file" />
<?php //echo form_error('file');   ?></div>

#2 Azercii


    Advanced Member

  • Members
  • PipPipPip
  • 47 posts
  • LocationUnited Kingdom
  • Age:22

Posted 29 June 2014 - 06:06 AM

You'd use css

background: url(location here);
border: 0;
width: 180px;
height: 30px;

#3 Chrisj


    Advanced Member

  • Members
  • PipPipPip
  • 189 posts

Posted 01 July 2014 - 09:51 AM

Thank you for your reply.

Do I have to name your code something in CSS?

#4 BuildMyWeb


    Advanced Member

  • Members
  • PipPipPip
  • 106 posts
  • LocationNY

Posted 20 August 2014 - 03:37 PM

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

Freelance Web Developer | Web Hosting | PHP Applications
Web Development, Hosting, Graphic Design, SEO

#5 CroNiX


    Advanced Member

  • Members
  • PipPipPip
  • 742 posts
  • LocationPortland, OR

Posted 20 August 2014 - 05:07 PM

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

#6 Digitizer


    Advanced Member

  • Members
  • PipPipPip
  • 42 posts
  • LocationBarcelona
  • Age:29

Posted 29 August 2014 - 09:55 AM

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">
    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;

and change your file button code like this

<label class="browseButton">
    Browse File
      <input type="file" id="file" name="file" />

Edited by Digitizer, 29 August 2014 - 09:57 AM.

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users

Cheap Linux VPS from $5
SSD Storage, 30 day Guarantee
1 TB of BW, 100% Network Uptime