htmlcsscss-selectorsforms

CSS selector for empty file input

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

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

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

Solution

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