Добре, дуже простий чистий CSS спосіб створення власного вхідного файлу.
Використовуйте мітки, але, як відомо з попередніх відповідей, label не викликає функцію onclick у firefox, може бути помилкою, але це не має значення з наступним.
<label for="file" class="custom-file-input"><input type="file" name="file" class="custom-file-input"></input></label>
Те, що ви робите, - це стиль етикетки, щоб виглядати, як ви цього хочете
.custom-file-input {
color: transparent;/* This is to take away the browser text for file uploading*/
/* Carry on with the style you want */
background: url(../img/doc-o.png);
background-size: 100%;
position: absolute;
width: 200px;
height: 200px;
cursor: pointer;
top: 10%;
right: 15%;
}
тепер просто прихойте фактичну кнопку введення, але ви не можете її встановити visability: hidden
Тож зробіть невидимим, встановивши opacity: 0;
input.custom-file-input {
opacity: 0;
position: absolute;/*set position to be exactly over your input*/
left: 0;
top: 0;
}
тепер, як ви могли помітити, у мене такий же клас на моїй мітці, як і в моєму полі введення, це тому, що я хочу, щоб обидва мали однаковий стиль, тому де коли ви натискаєте на ярлик, ви насправді натискаєте на невидимий поле введення.