Comment le style Ionique d'entrée type de fichier comme un Bouton

Je veux un style ionique fichier bouton sélecteur.

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

Mais Ionique n'ont pas une Entrée de fichier de type bouton.
Alors, comment puis-je obtenir un meilleur bouton que le Bouton standard avec un de Choisir un Fichier texte ?

Ce type de fichier êtes-vous désireux de les importer dans votre application? C'est une photo/vidéo, un fichier texte ou autre chose?

OriginalL'auteur Erdem Güngör | 2016-01-19

  1. 11

    Si vous voulez seulement le style de la <input> élément tel qu'un bouton, par exemple, vous pouvez adopter l'une des suggestions de style de ce post: http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/

    Ou un autre exemple de CSS-tricks: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/

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

    Gardez à l'esprit que dans un appareil mobile, il peut ne pas fonctionner et vous pouvez avoir besoin d'un plugin cordova. Par exemple: https://github.com/apache/cordova-plugin-file

    Merci de travailler pour moi. J'ai un style la touche d'entrée car aucun et de définir un bouton avec une icône. Merci!

    OriginalL'auteur beaver

  2. 1

    La meilleure façon que j'ai trouvé à faire c'est utiliser une étiquette avec l'attribut et la personnaliser à l'aide de css. Gardez à l'esprit que l'étiquette doit être l'id d'entrée. Ainsi, lorsque l'utilisateur fait de cliquer sur l'étiquette à l'entrée est déclenchée.

    <label class="myFakeUploadButton" for="myFileInput">Upload</label>
<input type="file" id="myFileInput">
    #myFileInput{
  position: absolute;
  opacity: 0;
}

.myFakeUploadButton{
 /* Whatever you want */
}

    Si fait, si vous le souhaitez, vous pouvez utiliser une icône comme ceci:

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

    OriginalL'auteur Pablo