Пользовательские файлы загрузки прокручиваются вверх страницы

Question

Я нашел пользовательский код загружаемого файла, который идеально подходит для моих нужд.

Проблема: Когда я нажимаю кнопку выбора файла, страница прокручивается в верхнюю часть страницы как открывается всплывающее окно исследования файла.

Результат: Здесь я хочу, чтобы страница не прокручивалась вверх при открытии всплывающего окна исследования файла.

Я добавляю полную структуру и ссылка на кодовую ссылку ниже.

Код:

label.file-label input[type="file"] {
    position:absolute;
    top: -1000px;
}

/***** Example custom styling *****/
.file-label {
    border: 1px solid #7A7A7A;
    /* border-radius: 4px; */
    padding: 2px 5px;
    margin: 2px;
    background: #f8f8f8;
    display: inline-block;
}
/* .file-label:hover {
    background: #CCC;
} */
.file-label:active {
    background: #CCF;
}
.file-label :invalid + span {
    color: #000;
}
/* .file-label :valid + span {
    color: #4A4;
} */

<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>
    <label class="file-label">
        <input type="file" name="myFile" class="file-upload-ctrl" required/>
        <span>Choose File</span>
    </label>
    <span class="file-selected">No file chosen</span>
	<p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p><p>Lorem ipsum</p>

Codepen: Настраиваемое всплывающее окно

Answer 1

Я только что изменил ваш

label.file-label input[type="file"] {
    position:absolute;
    top: -1000px;
}

на

label.file-label input[type="file"] {
     display: none;
}

Поскольку top: -1000px вызывает ошибку

Fiddle https://jsfiddle.net/netumc1g/