title: How to get remove default placeholder for input type file and get placeholder as given below?
body: <p>I have tried to change a placeholder. But it doesn't work. It by default shows no file chosen placeholder. And I want to design placeholder with image and text within input field as given below. I have designed form using bootstrap.<a href="https://i.stack.imgur.com/02Vjq.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/02Vjq.jpg" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/4XU9O.png" rel="nofollow noreferrer">My output</a></p>
  <p>html code:</p>
  <pre><code>&lt;form&gt;
   &lt;p&gt;Profile Picture&lt;/p&gt;     
     &lt;div class=&quot;form-group&quot;&gt;
       &lt;input type=&quot;file&quot; class=&quot;form-control&quot; id=&quot;img-upload&quot; 
        placeholder=&quot;Upload a picture&quot;&gt;
     &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  <p>CSS code:</p>
  <pre><code>      input[type=&quot;file&quot;] {
          background: url(&quot;../img/images/upload-file.png&quot;) no-repeat;
          background-position: center;
          height: 110px;
         }
  </code></pre>