- screenreaders will also generally announce that a field is "required" when the attribute is present. this may be confusing when the field is not, in fact, required. Additionally, some screenreaders will also announce that an input with validation constraints (such as "required") is currently "invalid".

So, with the above two points in mind, JAWS/Firefox for instance announces your first input as "First name edit invalid required entry...type in text"

- in actual use, this will also require the novalidate attribute on the form to suppress the browser's built-in validation if those required fields are actually optional.

4
Adam said on February 11, 2014

@GREGOR: CSS only recognizes the initial value of the input and doesn't update when the value changes.

5
Lu Nelson said on February 11, 2014

Couldn't you use the sibling selector '~' instead of '+', and thus be able to put the label before the input? You'd have to wrap each label and input in a span or div. Browser support is less good for sibling selector I think though

6
Gregor said on February 11, 2014

sorry, my fault, :empty is to select empty HTML nodes, not to select empty input tags. They way Jonathan did it seems the only way to do it in CSS-only

7
Daniel said on February 11, 2014

Hey Lu, the ~ selector is siblings after the element, not before it - would have been great!

8
Lu Nelson said on February 12, 2014

Ach. Bummer

9
xulai said on February 13, 2014

good！you NB！

10
Web Axe said on February 14, 2014

If designers weren't so silly we wouldn't have this problem to start with...

Sorry, comments are closed for this post. If you have any further questions or comments, feel free to send them to me directly.
f2富二代官网入口