title: Changing icon for file input with jquery
body: <p>I'm trying to build an html form with custom styled file inputs.
  I want the icon of the label to change once the user has selected a file to upload. I came up with some jquery-code but it changes the icon on all of the inputs at once rather then changing it only on the current one.</p>
  
  <p>Does anyone have an idea how to change the icon input by input?</p>
  
  <p>Thanks.</p>
  
  <p><strong>My code:</strong>
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$("#file-to-upload").change(function(){
   $(".file-upload").css("background", "url(https://css-tricks.com/apple-touch-icon.png) 2% / 45px no-repeat #ececec");
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[type="file"] {
      display: none;
  }
  
  .file-upload {
   display: block;
   width: 260px;
   padding: 10px 16px 10px 56px;
   border: none;
   outline: none;
   margin-bottom: 10px;
   font: 16px/28px 'Open Sans','Helvetica Neue',Helvetica,sans-serif;
   color: #3f3f3f;
   font-weight: 300;
   background: #ececec;
   -webkit-border-radius: 0;
   cursor: pointer;
   background: url(http://cdn.sstatic.net/stackoverflow/img/favicon.ico?v=4f32ecc8f43d) 2% / 45px no-repeat #ececec;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div&gt;&lt;label for="file-to-upload" class="file-upload"&gt;File input 1&lt;/label&gt;
  &lt;input type="file" name="file-to-upload" id="file-to-upload"&gt;&lt;/div&gt;
  &lt;div&gt;&lt;label for="file-to-upload" class="file-upload"&gt;File input 2&lt;/label&gt;
  &lt;input type="file" name="file-to-upload" id="file-to-upload"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>