Посмотрите пожалуйста пример, внизу страницы input[file] кастомный, почему по клику на него, кидает вверх страницы ?
Пример
document.querySelector("html").classList.add('js');
var fileInput = document.querySelector(".input-file"),
button = document.querySelector(".input-file-trigger"),
the_return = document.querySelector(".file-return");
button.addEventListener("keydown", function(event) {
if (event.keyCode == 13 || event.keyCode == 32) {
fileInput.focus();
}
});
button.addEventListener("click", function(event) {
fileInput.focus();
return false;
});
fileInput.addEventListener("change", function(event) {
the_return.innerHTML = this.value;
});
.input-file-container {
position: relative;
width: 225px;
padding-top: 500px;
}
.js .input-file-trigger {
display: block;
padding: 14px 45px;
background: #39D2B4;
color: #fff;
font-size: 1em;
transition: all .4s;
cursor: pointer;
}
.js .input-file {
position: absolute;
top: 0;
left: 0;
width: 225px;
opacity: 0;
padding: 14px 0;
cursor: pointer;
}
.js .input-file:hover+.input-file-trigger,
.js .input-file:focus+.input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
background: #34495E;
color: #39D2B4;
}
.file-return {
margin: 0;
}
.file-return:not(:empty) {
margin: 1em 0;
}
.js .file-return {
font-style: italic;
font-size: .9em;
font-weight: bold;
}
.js .file-return:not(:empty):before {
content: "Selected file: ";
font-style: normal;
font-weight: normal;
}
/* Useless styles, just for demo styles */
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #7F8C9A;
background: #FCFDFD;
}
h1,
h2 {
margin-bottom: 5px;
font-weight: normal;
text-align: center;
color: #aaa;
}
h2 {
margin: 5px 0 2em;
color: #1ABC9C;
}
form {
width: 225px;
margin: 0 auto;
text-align: center;
}
h2+P {
text-align: center;
}
.txtcenter {
margin-top: 4em;
font-size: .9em;
text-align: center;
color: #aaa;
}
.copy {
margin-top: 2em;
}
.copy a {
text-decoration: none;
color: #1ABC9C;
}
Flat UI - Custom Input:file
With JS return
It's just a test, not really usable.
Works on IE > 8 and modern browsers
by @geoffrey_crofte
see also Custom input:file with CSS only
Ответ
Дело в том что после вы даете фокус инпуту. а он в верху страницы.
В css снимаем как мне кажется лишний top: 0; и больше не кидает вверх.
Оно написано для этого селектора .js .input-file
document.querySelector("html").classList.add('js');
var fileInput = document.querySelector(".input-file"),
button = document.querySelector(".input-file-trigger"),
the_return = document.querySelector(".file-return");
button.addEventListener("keydown", function(event) {
if (event.keyCode == 13 || event.keyCode == 32) {
fileInput.focus();
}
});
button.addEventListener("click", function(event) {
fileInput.focus();
return false;
});
fileInput.addEventListener("change", function(event) {
the_return.innerHTML = this.value;
});
.input-file-container {
position: relative;
width: 225px;
padding-top: 500px;
}
.js .input-file-trigger {
display: block;
padding: 14px 45px;
background: #39D2B4;
color: #fff;
font-size: 1em;
transition: all .4s;
cursor: pointer;
}
.js .input-file {
position: absolute;
//top: 0;
left: 0;
width: 225px;
opacity: 0;
padding: 14px 0;
cursor: pointer;
}
.js .input-file:hover+.input-file-trigger,
.js .input-file:focus+.input-file-trigger,
.js .input-file-trigger:hover,
.js .input-file-trigger:focus {
background: #34495E;
color: #39D2B4;
}
.file-return {
margin: 0;
}
.file-return:not(:empty) {
margin: 1em 0;
}
.js .file-return {
font-style: italic;
font-size: .9em;
font-weight: bold;
}
.js .file-return:not(:empty):before {
content: "Selected file: ";
font-style: normal;
font-weight: normal;
}
/* Useless styles, just for demo styles */
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #7F8C9A;
background: #FCFDFD;
}
h1,
h2 {
margin-bottom: 5px;
font-weight: normal;
text-align: center;
color: #aaa;
}
h2 {
margin: 5px 0 2em;
color: #1ABC9C;
}
form {
width: 225px;
margin: 0 auto;
text-align: center;
}
h2+P {
text-align: center;
}
.txtcenter {
margin-top: 4em;
font-size: .9em;
text-align: center;
color: #aaa;
}
.copy {
margin-top: 2em;
}
.copy a {
text-decoration: none;
color: #1ABC9C;
}
Flat UI - Custom Input:file
With JS return
It's just a test, not really usable.
Works on IE > 8 and modern browsers
by @geoffrey_crofte
see also Custom input:file with CSS only
