How to style Ionic input type file as a Button

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

The best way I found to do it is use a label with the for attribute and customized it using css. Keep in mind that the for label must be the input id. So when the user makes click on the label the input is triggered.

<label class="myFakeUploadButton" for="myFileInput">Upload</label>
<input type="file" id="myFileInput">

#myFileInput{
  position: absolute;
  opacity: 0;
}

.myFakeUploadButton{
 /* Whatever you want */
}

If fact if you wish you can use a icon like this:

<input type="file" accept="image/*" capture="camera" (change)="onFileSelected($event)" id="fileInput"/>
<label for="fileInput" icon-only ion-button>
    <ion-icon name="camera"></ion-icon>
</label>