web-dev-qa-db-fra.com

Comment styliser Ionic fichier de type d'entrée sous forme de bouton

Je veux styliser un bouton de sélection de fichier ionic.

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

Mais Ionic n'ont pas de bouton de fichier de type d'entrée. Alors, comment puis-je obtenir un bouton plus beau que le bouton standard avec un texte Choisir un fichier?

javascriptmeteorinputionic-frameworkinput-type-file
11
Erdem Güngör

Si vous voulez seulement styler le <input> élément en tant que bouton, par exemple, vous pouvez adopter l'un des styles suggérés pour cet article: 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, cela peut ne pas fonctionner et vous aurez peut-être besoin d'un plugin cordova. Par exemple: https://github.com/Apache/cordova-plugin-file

12
beaver

La meilleure façon de le faire est d'utiliser une étiquette avec l'attribut for et de la personnaliser en utilisant css. Gardez à l'esprit que l'étiquette for doit être l'ID d'entrée. Ainsi, lorsque l'utilisateur clique 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 vous le souhaitez, vous pouvez utiliser une icône comme celle-ci:

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