用图像图标替换文件字段 - 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 :

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/

Answer 1

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 */
}

Answer 2

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

Answer 3

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
}