Javascript 如何将 Ionic 输入类型文件设置为按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34886621/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style Ionic input type file as a Button
提问by Erdem Güng?r
I want to style a ionic file chooser button.
我想设计一个离子文件选择器按钮。
<input type="file" id="myFileInput">
But Ionic don't have an Input type file button. So how can I get a better looking button than the standard Button with a Choose a File text ?
但是 Ionic 没有输入类型的文件按钮。那么我怎样才能获得比标准按钮更好看的按钮和选择文件文本？
回答by beaver
If you want only style the <input>element as a button, for example, you can adopt one of the suggested style of this post: http://geniuscarrier.com/how-to-style-a-html-file-upload-button-in-pure-css/
<input>例如，如果您只想将元素样式为按钮，则可以采用本文建议的样式之一：http: //geniuscarrier.com/how-to-style-a-html-file-upload-button-纯css/
Or another example from CSS-tricks: https://css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
或者来自 CSS-tricks 的另一个例子：https: //css-tricks.com/snippets/css/custom-file-input-styling-webkitblink/
or this one: http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
或者这个：http: //tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/
Keep in mind that in a mobile device it may not work and you may need a cordova plugin. For example: https://github.com/apache/cordova-plugin-file
请记住，在移动设备中它可能无法工作，您可能需要一个cordova 插件。例如：https: //github.com/apache/cordova-plugin-file
回答by Pablo
The best way I found to do it is use a label with the for attribute and customized it using css. Keep in mind that the for label must be the input id. So when the user makes click on the label the input is triggered.
我发现最好的方法是使用带有 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 */
}
If fact if you wish you can use a icon like this:
事实上，如果您愿意，可以使用这样的图标：
<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>
