Why this Custom Input file is not working in Edge? - html

Question

Hell, I am building a customized input file, it's working on Chrome, FF, Safari, but not on Edge, any idea?
Here's my demo. Please open it on Chrome then on Edge to understand the issue:
/* /////////////////Custom Upload input///////////// */
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
-webkit-appearance: none;
}
.custom-file-input::-ms-file-upload-button {
visibility: hidden;
-ms-appearance: none;
}
.custom-file-input::before {
content: 'Attach';
display: inline-block;
background-color: #c6c6c6;
border: none;
width: 50px;
font-family: Roboto, sans-serif, FontAwesome;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
font-weight: normal;
font-style: normal;
font-stretch: normal;
cursor: pointer;
color: #ffffff;
font-size: 12px;
text-align: center;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
<input class="custom-file-input" type="file">

Answer 1

You should use ::-ms-browse to style the file input button in Edge. Then we must wrap input type file with label and do something in CSS. And if you want to change the default file input box in Edge, you need to hide it first using input[type="file"] { opacity: 0;} and combine js code to show the file name. You could check my sample of styling input type file in Edge and Chrome below:
$('input[type=file]').change(function(e) {
$in = $(this);
$in.next().html($in.val());
});
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
-webkit-appearance: none;
}
::-ms-browse {
display:none;
}
input[type="file"] {
display: input-block;
width: 100%;
height: 30px;
opacity: 0;
cursor:pointer;
position:absolute;
left:0;
}
.custom-file-input::before {
content: 'Attach';
display: inline-block;
background-color: #c6c6c6;
border: none;
width: 50px;
font-family: Roboto, sans-serif, FontAwesome;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
font-weight: normal;
font-style: normal;
font-stretch: normal;
cursor: pointer;
color: #ffffff;
font-size: 12px;
text-align: center;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active::before {
background: linear-gradient(top, #e3e3e3, #f9f9f9);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label class="custom-file-input">
<input type="file">
<span class="fileName">Choose file...</span>
</label>