input[type="file"] check existence of file attachment with css

Question

It's not a JS question, just looking for a clear css solution if it's possible.

For a radio button or a checkbox we can use the :checked pseudo class:

input{
  % styles %
}
input:checked{
  % another styles %
}

Are there tricks for checking if a file attachment exists with CSS?

Answer 1

(updated, due to misunderstanding the question)

It is possible to check if a file was attached using the attribute required.

See: http://jsfiddle.net/1ua59jt1/1/

HTML:

<input id="file" type="file" name="fileselect" required="required" />

CSS:

#file:valid { color: green; }
#file:invalid { color: red; }

But you can never really validate, if a "correct" file was selected this way. You can only check if or if not a file was selected at all.

---

// completion update:

The required attribute is HTML5. Please be aware that not all browsers support this: http://www.w3schools.com/tags/att_input_required.asp

That means the only trusted way for client side validation is using javascript. If you want to do so, I recommend using the novalidate attribute on your form to disable the browsers default validation (http://www.w3schools.com/tags/att_form_novalidate.asp).

But always use server-side validation, too. You can never make sure the user has enabled jaavscript or hasn't manipulated javascript. So the best way is always to validate values on the side you have fully control over: the server, i.e. your action the form sends its data to.