How to style file input?

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.

Possible duplicate of [Styling an input type="file" button](https://stackoverflow.com/questions/572768/styling-an-input-type-file-button) also I created [this](https://codepen.io/jcastillo/pen/RJzEmq) — Juan, Sep 28 '18 at 22:44

Michael Eugene Yuen · Accepted Answer · 2018-09-29T10:20:11.587

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.

If you want to show how many files are selected: https://jsfiddle.net/michaelyuen/f7xr62cs/ — Michael Eugene Yuen, Sep 29 '18 at 10:28

score -1 · Answer 2 · 2018-09-28T23:19:36.083

-1

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!!!

edited Sep 28 '18 at 23:19

answered Sep 28 '18 at 22:56

This only made the text which says which file was chosen go away. I want that text but next to the button and in grey with the white background. – Flama Sep 28 '18 at 23:17
Please view my *revised edit*, it may be of some assistance (I hope). – Sep 28 '18 at 23:19

How to style file input?

2 Answers2