Jump to content


Photo

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


  • Please log in to reply
5 replies to this topic

#1 Chrisj

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?

 

Thanks

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


#2 Azercii

Azercii

    Advanced Member

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

Posted 29 June 2014 - 06:06 AM

You'd use css

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


#3 Chrisj

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

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

CroNiX

    Advanced Member

  • Members
  • PipPipPip
  • 744 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

Digitizer

    Advanced Member

  • Members
  • PipPipPip
  • 43 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">
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, 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

AlphaBit.com