-
Notifications
You must be signed in to change notification settings - Fork 64
/
validity.css
54 lines (37 loc) · 1.19 KB
/
validity.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/*
* STEP 1: Show the user when a form field is required with an orange star.
*/
/* Browsers that implement HTML5 Forms Natively */
input:required, textarea:required{
background:url("../images/asterisk_orange.png") no-repeat right top;
}
/* Polyfill */
input[required] {
background:url("../images/asterisk_orange.png") no-repeat right top;
}
input[type="checkbox"][required] {
background-image: none !important;
}
/*
* STEP 2: Show the user when a form field has valid data in it with a green checkmark.
*/
/* Browsers that implement HTML5 Forms Natively */
input[required]:valid, textarea[required]:valid {
/* Make this important if you want IE10 to work right. */
background:url("../images/tick.png") no-repeat right top !important;
}
/* Polyfill */
input[required].wf2_valid {
background:url("../images/tick.png") no-repeat right top;
}
/*
* STEP 3: Show the user when a form field has invalid data in it with a red 'X'.
*/
/* Browsers that implement HTML5 Forms Natively */
input:focus:invalid, textarea:focus:invalid {
background:url("../images/cancel.png") no-repeat right top;
}
/* Polyfill */
input.wf2_invalid:focus {
background:url("../images/cancel.png") no-repeat right top;
}