styling the optional input fields - css

Question

I have a web form where some input fields are required and some are optional. I can give style the required fields as I expect but can't the optional ones.
When the optional fields have a valid input it will turn green(for instance). And it works with this code
input:optional:valid{
background: #AAB69B
}
But generally like as first loading they will be in another color. For this, I am trying this code
input:optional{
background: #f19999
}
But this doesn't work. I can't select the optional fields when they have no input. Unfortunately, with no input value they get the background as I set for the valid input. When I start typing , it get my expected invalid background. And when the input gets valid, the field gets valid background (it works).
Please, help !
Demo Link : http://bdlance.byethost9.com/front-end%20form%20validation%20with%20html5/

Answer 1

Taking a look at your form styles, I've seen that your background color is similar for both valid and invalid pseudo classes:
input:required:invalid, textarea:required:invalid{
background: #AAB69B; // same
}
input:required:focus:invalid, textarea:focus:invalid{
background: #AAB69B; // same
}
input:required:valid, textarea:required:valid{
background: #AAB69B; // same
}
input:optional, select {
background: #f19999;
}
input:optional:valid{
background: #AAB69B; // same
}
Try this instead:
input:required:invalid, textarea:required:invalid{
background: #f19999;
}
input:required:focus:invalid, textarea:focus:invalid{
background: #f19999;
}
input:required:valid, textarea:required:valid{
background: #AAB69B;
}
input:optional, select {
background: #f19999;
}
input:optional:valid{
background: #AAB69B;
}
Sorry, but your CSS file is not the best, Please do dedicate more time to learn CSS. Here are some good resources (the order matters):
https://developer.mozilla.org/en-US/docs/Learn/CSS
https://flukeout.github.io/
https://smacss.com/
https://en.bem.info/methodology/css/