Replace File Field with Image Icon - HTML/CSS

Question

I want to replace my File Field with Image Icon. Because File Field Doesn't looks cool.

Take a Look at this Camera Icon. When someone clicks this Icon, Browse Window Opened up : enter image description here

Here is JsFiddle DEMO: http://jsfiddle.net/8aJb4/2/

Here is my CODE:

HTML:

<div class="container">
    <input type="file" name="image_src" id="image_src" >
</div>

CSS:

.container{
    width:500px;
    border:black solid 1px;
    text-align:center;
    padding:4px;

}

Here is the link to Image Icon: http://postimg.org/image/rg17ffpxh/

http://stackoverflow.com/questions/2855589/replace-input-type-file-by-an-image — nullability, Sep 17 '13 at 16:42
possible duplicate of [How to style "input file" with CSS3 / Javascript?](http://stackoverflow.com/questions/3226167/how-to-style-input-file-with-css3-javascript) — Quentin, Sep 17 '13 at 16:42

Milan and Friends · Answer 1 · 2013-09-17T16:59:48.097

Here's a Fiddle

<div class="container">
  <span class="select-wrapper">
    <input type="file" name="image_src" id="image_src" />
  </span>
</div>


.container{
  width: 500px;
  border: 1px solid #333;
  padding: 4px;
}
.select-wrapper {
  background: url(http://s10.postimg.org/4rc0fv8jt/camera.png) no-repeat;
  background-size: cover;
  display: block;
  position: relative;
  width: 33px;
  height: 26px;
}
#image_src {
  width: 26px;
  height: 26px;
  margin-right: 100px;
  opacity: 0;
  filter: alpha(opacity=0); /* IE 5-7 */
}

score 2 · Answer 2 · answered Sep 17 '13 at 16:49

HTML

 <script>
function upload(){
  document.getElementById("image_src").click();
 }
 </script>
<div class="container">
    <img id="img" src="http://postimg.org/image/rg17ffpxh/" onclick="upload()" alt="hello"/>
   <input type="file" name="image_src" id="image_src" />
   </div>

CSS

.container{
width:500px;
border:black solid 1px;
text-align:center;
padding:4px;   
}
#image_src {
position:absolute;
left:-9999px;
}
#img { cursor:pointer; }

I didn't get your image link to work but here is jsfiddle

score 2 · Answer 3 · answered Sep 17 '13 at 16:58

it is simple, you just define a file element as hidden and also define an img tag with your own background in it. Write javascript to click the file element programmatically on the click of your img tag. something like this:

<input type="file" name="image_src" id="image_src" hidden='hidden'>
<img src='url' onclick='openWindow()'>

function openWindow(){
document.getElementById("image_src").click
}

Replace File Field with Image Icon - HTML/CSS

3 Answers3