如何将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输入类型文件设置为按钮

回答

相关问题