How to style Ionic input type file as a Button

javascript meteor input ionic-framework input-type-file
Erdem Güngör picture Erdem Güngör · Jan 19, 2016 · Viewed 25.5k times · Source

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 ?

Answer

beaver picture beaver · Jan 20, 2016

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

Related questions

"continue" in cursor.forEach()

I'm building an app using meteor.js and MongoDB and I have a question about cursor.forEach(). I want to check some conditions in the beginning of each forEach iteration and then skip the element if I don't have to …

Read More
Console logging for react?

I'm super new to React and I'm trying to get it set up for Meteor and piecing stuff together from other sources too. One of these other sources set up console logging for the app, but I'm going the ES6/…

Read More
How to properly make mock throw an error in Jest?

I'm testing my GraphQL api using Jest. I'm using a separate test suit for each query/mutation I have 2 tests (each one in a separate test suit) where I mock one function (namely, Meteor's callMethod) that is used in mutations. …

Read More