How to style file input? - html

Question

Ok so I got the following:
What I want to do is to make the button which says "Elegir archivos" to be orange like the button that says "Finalizar" and make the text the file-input produces grey like the text which says "Formatos aceptados".
Here's what I tried:
<tr>
<td class="upload-pic"><input class="file-submit" type="file" name="fileUpload" size="50" multiple="multiple"/></td>
</tr>
CSS:
.file-submit {
height: 35px !important;
width: 300px !important;
padding: 5px !important;
font-size: 15px !important;
margin-right: 10px !important;
margin-top: 10px !important;
margin-bottom: 20px !important;
background-color:red;
}
input[type="file"] {
width: 80%;
color: white;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
background-color: #FD8907;
margin-left: 10px;
float: right;
}
What I want: The button which says "Elegir archivos" has to be orange with its text in white. The text next to it which says "No se eligio archivo" has to be grey with the white background. For some reason everything ends up in a big orange box and the button still looks like the default one.

Answer 1

In order to achieve that, you can wrap the input button with "label", so that label becomes clickable. Then make your input button opacity 0 (transparent).
$('.file-submit').on('change', function(){
$(this).closest('.btn-wrapper').find('span')
.text('FOTOS Formatos aceptados: JPG');
})
.btn-wrapper {
font-family: 'Veranda', sans-serif;
}
.btn-file {
padding: 8px 15px;
background-color: #fd8907;
border-radius: 3px;
color: #fff;
margin-right: 8px;
}
.btn-file input[type=file] {
position: absolute;
top: 0;
right: 0;
min-width: 100%;
min-height: 100%;
font-size: 100px;
text-align: right;
filter: alpha(opacity=0);
opacity: 0;
outline: none;
background: white;
cursor: inherit;
display: block;
}
.btn-file span {
display: block;
color: #777;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
<div class="btn-wrapper">
<label class="btn-file">
Elegir archivos
<input type="file" class="file-submit" name="fileUpload" accept=".jpg" multiple="multiple">
</label>
<span>No se eligio archivo</span>
</div>
</td>
But if you want to change the text after file is selected, you will need some help with javascript or jQuery.

Answer 2

Basically what the problem is, that the browser doesn't know that you want it to be orange. Because your file says that it is a button, it is applying the default HTML button style to it. To clear this, in the CSS, all you have to say is:
tr td input.file-submit {
text-decoration: none;
color: #ffffff;
}
Then, just change the color of the text to #848D95.
There you go. Done.
Hope this helps!!!