Change text color of 'no file chosen'

Question

It always creates a button where 'Choose file' is written, and beside that 'no file chosen' word is visible until I choose any file. But the text color is always black. Is it possible to change the font-color? I need to make it white.

<input type="file">

Answer 1

Try this out.

input[type="file"]{
    color: transparent;
}

Answer 2

You can do something like this

<label for="inputTag" class="label">
  Select Image
  <input id="inputTag" type="file" class="input" />
</label>

And then style it with CSS like this

.input {
  display: none;
}

.label{
 color: #730404;
 cursor: pointer;
}

With this, whatever you put as the label will be your select output. So you won't have Choose file and no file chosen text. You can change the label color as you wish. You can even make the label a CameraIcon

Answer 3

I'm satisfied with this Answer:

The best approach would be to have a custom label element with a for attribute attached to a hidden file input element. (The label's for attribute must match the file element's id in order for this to work).

    <label for="file-upload" class="custom-file-upload">
    Custom Upload
</label>

As an alternative, you could also just wrap the file input element with a label directly: (example)

<label class="custom-file-upload">
    <input type="file"/>
    Custom Upload
</label>

In terms of styling, just hide1 the input element using the attribute selector.

input[type="file"] {
    display: none;
}

Then all you need to do is style the custom label element. (example).

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}