<label>
<input class="file_real" type="file" accept="image/jpg, image/png, image/gif">
<input class="file_fake" type="text" placeholder="*.jpg/png/gif Only" readonly tabindex="-1">
<span class="button">Find</span>
</label>
body {
display: flex;
height: 100vh;
justify-content: center;
align-items: center;
background-color: #f1f1f1
}
// attached input
label {
position: relative;
display: flex;
justify-content: center;
align-items: center;
max-width: 400px;
width: 100%;
.file_real {
position: absolute;
top: 0;
left: 0;
z-index: 2;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.file_fake {
padding: 0 15px;
width: 100%;
height: 50px;
border: 1px solid #ddd;
}
.button {
position: absolute;
top: 0;
bottom: 0;
right: 10px;
display: flex;
justify-content: center;
align-items: center;
margin: auto 0;
padding: 0 15px;
height: 30px;
font-size: 13px;
color: #fff;
background-color: #0d6efd;
}
}
View Compiled
$('.file_real').on('change', function() {
var files = $(this)[0].files[0]; // Get file name
var fake = $('.file_fake');
// If the user presses cancel, the input is empty.
fake.val('');
// If the user selects a file, the file name is displayed in the fake input.
if ( files !== undefined ) {
fake.val(files.name);
}
});
This Pen doesn't use any external CSS resources.