How to style an Ionic input file as a button

Question

I want to create an ion file select button.

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

But Ionic has no input file type button. So, how can I get a more convenient button than the standard button with the text "Select file"?

Answer 1

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

CSS-: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

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

, , cordova. : https://github.com/apache/cordova-plugin-file

Answer 2

, , - for css. , . , , .

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

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

.myFakeUploadButton{
 /* Whatever you want */
}

, :

<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>