如何將Ionic輸入類型文件設置爲按鈕

我想要設置離子文件選擇器按鈕的樣式。如何將Ionic輸入類型文件設置爲按鈕

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

但是Ionic沒有輸入類型文件按鈕。那麼，如何使用選擇文件文本獲得比標準按鈕更好看的按鈕？

來源

2016-01-19 Erdem Güngör

是你想要什麼類型的文件上傳到你的應用程序？是照片/視頻，文本文件還是其他內容？ – SM3RKY

如果只想風格<input>元素作爲一個按鈕，例如，你可以通過這個帖子的建議風格之一：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/

請記住，在移動設備可能無法正常工作，你可能需要一個科爾多瓦插件。例如：https://github.com/apache/cordova-plugin-file

來源

2016-01-20 10:12: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>

來源

2018-02-18 14:35:54 Pablo

如何將Ionic輸入類型文件設置爲按鈕

回答

相關問題