Search code examples
htmlcssiosios6

How to style the iOS6 file input control?

I am glad the file input control for files has finally arrived to the iPhone with iOS 6.

However, the display looks kind of odd. Does anyone know ways to style the control?

Solution

  • Here's the OK solution for iOS:

    HTML:

    <form enctype="multipart/form-data" method="POST" accept-charset="UTF-8">
  <input accept="image/jpeg" name="pic" id="pic" type="file">
  <a onmousedown="myClick();">
  Choose a new picture
  </a>
  <br> 
  <input value="put up the picture" type="submit"> 
</form>

    CSS:

    #pic {
  display:none;
}

    Javascript:

    function myClick() {
  document.getElementById('pic').click();
}

    Or on CSSdeck: http://cssdeck.com/labs/kmyjvuwb

    This works fine in current Firefox and Chrome, too, but alas, not in IE (the file is not uploaded!)...