web-dev-qa-db-ja.com

Ionic入力タイプファイルをボタンとしてスタイルする方法

ionicファイル選択ボタンのスタイルを設定します。

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

しかし、Ionicには入力タイプのファイルボタンがありません。どうすれば、[ファイルを選択]テキストを持つ標準のボタンより見栄えの良いボタンを取得できますか？

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

あなただけのスタイルが欲しいなら<input>要素をボタンとして、たとえば、この投稿の推奨スタイルの1つを採用できます。 http://geniuscarrier.com/how-to-style-a-html-file-upload-button- in-pure-css /

または、CSS-tricksの別の例： 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

12
beaver

私がそれを行うために見つけた最良の方法は、for属性を持つラベルを使用し、cssを使用してそれをカスタマイズすることです。 forラベルは入力IDでなければならないことに注意してください。したがって、ユーザーがラベルをクリックすると、入力がトリガーされます。

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