Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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 ?

like image 485
Erdem Güngör Avatar asked Jan 19 '16 20:01

Erdem Güngör


1 Answers

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

like image 109
beaver Avatar answered Sep 21 '22 08:09

beaver