Как стилизовать файл ввода типа Ionic в качестве кнопки

Question

Я хочу создать кнопку выбора ионного файла.

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

Но у Ionic нет кнопки ввода типа файла. Итак, как я могу получить лучшую кнопку, чем стандартная кнопка с текстом «Выбрать файл»?

Answer 1

Если вы хотите, единственный стиль в <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/

Помните, что в мобильном устройстве это может не сработать, и вам может понадобиться плагин cordova. Например: https://github.com/apache/cordova-plugin-file

Answer 2

Лучший способ, которым я нашел это, - использовать метку с атрибутом for и настроить ее с помощью css. Имейте в виду, что для метки должен быть идентификатор ввода. Поэтому, когда пользователь делает клик по метке, вход запускается.

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