I'm playing around with CSS3 form elements, which are really rather
delightful (don't you wish that IE6 and 7 would creep off into a corner and
quietly die)
I want to have a visible indicator that a field is valid or invalid (easy
enough) as follows:
CSS:
<style>
input:valid + span::after { content: "\2713 "}
input:invalid + span::after { content: "\2717 "}
</style>
HTML:
<form>
<p><label>Name: <input required name=name
placeholder="name (required)"><span/></label></p>
<p><label>E-mail: <input type=email required name=email
placeholder="email (required)"><span/></label></p>
<p><label>colour: <input type=color required name=color
placeholder="color (required)"><span/></label></p>
<p><label>URL: <input type=url name=url
placeholder="url"><span/></label></p>
<p><label>Comment: <textarea required
name=comment></textarea><span/></label></p>
<p><input type=submit value=Do it></p>
</form>
This puts a tick after valid input fields, and a cross after invalid ones.
But I want neither after empty fields. I have tried all sorts of variants
on
input[value=""] + span::after {content:""}
but to no avail. It would appear that Firefox and Chrome both evaluate the
value= only on load, and not after the field has changed. Anyone got any
suggestions?
Peter
______________________________________________________________________
css-discuss [cs...@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
