Title: styling the optional input fields
Tags: css;html;validation
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/
Comment: @Paulie_D  , here is the domo http://bdlance.byethost9.com/front-end%20form%20validation%20with%20html5/

Comment: That code should work - http://jsfiddle.net/am9d9mr4/1/ Can you make a demo of it **not** working.


Here is another answer: 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/

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 3.0', 'CreationDate': '2015:00:11/07/15', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<css><html><validation>', 'Title': 'styling the optional input fields', 'ViewCount': 498, 'id': 33584329, 'user_AboutMe': '', 'user_AccountId': 4591408.0, 'user_DisplayName': 'Mohammad Shohel Rana', 'user_Reputation': 77.0, 'user_Views': 26.0, 'user_id': 3724591.0}}