Search code examples
javascriptmeteorinputionic-frameworkinput-type-file

How to style Ionic input type file as a Button

I want to style a ionic file chooser button. 

<input type="file" id="myFileInput">

But Ionic don't have an Input type file button. So how can I get a better looking button than the standard Button with a Choose a File text ?

Solution

  • If you want only style the <input> element as a button, for example, you can adopt one of the suggested style of this post: http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

    Or another example from CSS-tricks: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

    or this one: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

    Keep in mind that in a mobile device it may not work and you may need a cordova plugin. For example: https://github.com/apache/cordova-plugin-file