CSS for valid/invalid form input.
This commit is contained in:
parent
f8130b1640
commit
94493554ca
2 changed files with 15 additions and 6 deletions
|
|
@ -308,17 +308,13 @@ body {
|
|||
vertical-align: top;
|
||||
}
|
||||
|
||||
&:valid {
|
||||
&:not(:placeholder-shown):valid {
|
||||
background-color: color(status-bg);
|
||||
}
|
||||
|
||||
&:not(:placeholder-shown):invalid {
|
||||
background-color: color(error-bg);
|
||||
}
|
||||
|
||||
form.submitted &:invalid {
|
||||
background-color: color(error-bg);
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
|
|
@ -326,6 +322,19 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
.js-submitted {
|
||||
input,
|
||||
textarea {
|
||||
&:valid {
|
||||
background-color: color(status-bg);
|
||||
}
|
||||
|
||||
&:invalid {
|
||||
background-color: color(error-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Print. */
|
||||
|
||||
aside,
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue