CODEWITHSUNDEEP
htmlcss
Hassan Sardar
Hassan Sardar

Reputation: 4523

Replace File Field with Image Icon - HTML/CSS

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/

Upvotes: 2

Views: 13787

Answers (3)

Milan and Friends
Milan and Friends

Reputation: 5610

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

Upvotes: 4

Nishad K Ahamed
Nishad K Ahamed

Reputation: 1394

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
}

Upvotes: 2

Eric H.
Eric H.

Reputation: 7014

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

Upvotes: 2

Related Questions