title: Chrome CSS - Styling File Input
body: <p>Here is my file input rendered in Chrome:</p>
  
  <p><img src="https://i.stack.imgur.com/YkIw7.gif" alt="enter image description here"></p>
  
  <p>In IE it looks a lot more basic, which is fine (although the vast inconsistencies with this particular control are frustrating!)</p>
  
  <p>My default CSS for inputs is:</p>
  
  <pre><code>input{
      font-family: arial, sans-serif;
      font-size: 12px;
      font-weight: bold;
      color:White;
      background-image:url(../images/buttonBG.png);
      height:27px;
      border:1px solid #000;
      border-radius: 7px;
      -moz-border-radius: 7px;
      padding: 5px 20px 5px 20px;
      -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
      -moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), inset 0px 1px 0px rgba(255, 255, 255, 0.5);
      text-shadow: 0px 1px 2px #000;
  }
  input:hover{
      text-shadow: 0px 1px 2px #fff;
      background-image:url(../images/buttonBGo.png);
  }
  </code></pre>
  
  <p>As you can see there are two types of text on the control, is it possible to style both individually?</p>
  
  <p>Also is there any way to specifically select file inputs?  Like input.file (doesn't seem to work).  If this is not possible, how do I remove all the CSS the input style has applied to it (so I am working with a blank slate again).</p>