How to style Ionic input type file as a Button

Issue

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

Answered By – beaver

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published