title: File Upload Styling in Chrome
body: <p>I've a html formular in a part of a website, which only specific administration users can access. In this form, you can upload csv files. As only a small group of users can do this, the functionality is more important than the styling. So I decided not to do the usual trick overlaying a div over the field. I just want to archive one thing: The text in the field should look the in Chrome the same as in FF (vertical and horizontal centered text).</p>
  
  <p>Here you can see the both renderings:</p>
  
  <p>FF: <a href="http://i.stack.imgur.com/wbHhG.png" rel="nofollow">http://i.stack.imgur.com/wbHhG.png</a></p>
  
  <p>Chrome: <a href="http://i.stack.imgur.com/1BFHu.png" rel="nofollow">http://i.stack.imgur.com/1BFHu.png</a></p>
  
  <p>HTML-Code:</p>
  
  <pre><code>&lt;input type="file" class="button blue full-width" name="csv_file" id="csv_file"&gt;
  </code></pre>
  
  <p>CSS-Styles:</p>
  
  <pre><code>color: #fff;
  height: 50px;
  line-height: 50px;
  padding: 0 10%;
  background-image: url("../images/item-hover-button-addtocart-normal.png");
  border: medium none;
  margin-bottom: 10px;
  background-color: #fff;
  text-align: center;
  border-radius: 4px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
  display: block;
  font-size: 14px;
  transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
  width: 100%;
  </code></pre>