CSS selector for empty file input

Question

I know that styling file input is pretty minimal, which is not a bad thing.

Is there some way of selecting file input which is empty?

The plan is to show or hide a submit button depending on whether the file input is empty.

Answer 1

If you are comfortable marking the input as required, you could do it with just css:

input:invalid ~ .chosen {
    display: none;
}
input:valid ~ .empty {
    display: none;
}

<input type="file" required><br>

<span class="empty">Empty</span>
<span class="chosen">Chosen</span>