CSS selector for empty file input

Question

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.

Yes I mistakenly deleted the "there" in the 2nd line. But there should be no need to preface your question to prevent anyone saying you can't input style elements - it is common knowledge they can be styled so if anyone had that little knowledge they shouldn't be answering at all and can be ignored :) — FluffyKitten
– FluffyKitten, Commented Aug 31, 2017 at 3:11
@MoisheLipsker Yes and no — I can’t get it to work for me, so no, but if it worked, then yes. — Manngo
– Manngo, Commented Aug 31, 2017 at 3:55
I'm pretty confused by the multiple people saying you can't do this with CSS and then see the accepted answer is a pure CSS solution ¯_(ツ)_/¯ — ESR
– ESR, Commented Aug 31, 2017 at 6:43

Moishe Lipsker · Accepted Answer · 2017-08-31 06:39:26Z

20

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>

edited Aug 31, 2017 at 6:39

answered Aug 31, 2017 at 3:32

Moishe Lipsker

3,0322 gold badges24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Manngo Over a year ago

That’s a pretty good approach. The whole point is that the file is required before you submit, which is why I want to hide it otherwise. Thanks

Cody Over a year ago

Brill-yantz. Love the touch on required.

score 3 · Accepted Answer · 2017-08-31 04:10:41Z

3

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

No.

You'll need JavaScript. You can find several answers here on SO and elsewhere. The basic idea is to watch the element for change events, add a class such as non-empty indicating there are files selected, then style input[type="file"].non-empty + label, assuming you are using the technique of using a label as the replacement file input button. You will have to special-case form.reset() which empties file inputs inside the form but does not trigger a change event on the input. Here's some sample code (without the form.reset part):

// Add a class to a file input if it's not empty.
function mark() { this.classList.toggle('non-empty', this.files.length); }

// Watch a file input and update non-empty status.
function watch(input) { input.addEventListener('change', mark); }

// Get all file inputs.
const inputs = Array.from(document.querySelectorAll('input[type=file]'));

// Watch all file inputs in the whole document.
inputs . forEach(watch);

input[type="file"]                          { width: 0.1px; height: 0.1px; }
input[type="file"].non-empty + label        { color: green; }
input[type="file"].non-empty + label::after { content: ' (specified)'; }

<input type="file" id="input">
<label for="input">Specify file</label>

edited Aug 31, 2017 at 4:10

answered Aug 31, 2017 at 3:29

user663031

2 Comments

BoltClock Over a year ago

The 0.1px dimensions intrigue me. Are there any browsers that have trouble submitting file inputs with display: none?

user663031 Over a year ago

@BoltClock Apparently, yes, at least according to something I saw somewhere once.

Collectives™ on Stack Overflow

CSS selector for empty file input

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related