title: Replace File Field with Image Icon - HTML/CSS
body: <p>I want to <strong>replace</strong> my <strong>File Field</strong> with <strong>Image</strong> Icon. Because File Field Doesn't looks cool.</p>
  
  <p><strong>Take a Look at this Camera Icon. When someone clicks this Icon, Browse Window Opened up :</strong>
  <img src="https://i.stack.imgur.com/L56uH.png" alt="enter image description here"></p>
  
  <p><strong>Here is JsFiddle DEMO:</strong> 
  <a href="http://jsfiddle.net/8aJb4/2/" rel="nofollow noreferrer">http://jsfiddle.net/8aJb4/2/</a></p>
  
  <p><strong>Here is my CODE:</strong></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;input type="file" name="image_src" id="image_src" &gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.container{
      width:500px;
      border:black solid 1px;
      text-align:center;
      padding:4px;
  
  }
  </code></pre>
  
  <p><strong>Here is the link to Image Icon:</strong>
  <a href="http://postimg.org/image/rg17ffpxh/" rel="nofollow noreferrer">http://postimg.org/image/rg17ffpxh/</a></p>