如何引用此文本区域和复选框？

Question

I have the fields colored when information has not been entered in, and in my CSS it will change color when valid. I have the others referenced, but I can't get my textarea's color to change. How do I reference it? Also, I can't get my checkbox color to change when checked next to I accept, any ideas?

Thanks in advance.

Here is my jsfiddle http://jsfiddle.net/4u3w29r4/

Here is my css.

h1, h2, h3, nav, footer {
 font-family: Georgia, Cambria, "Times New Roman", serif;
}
body {
   font-family: "Lucida Sans", Verdana, Arial, sans-serif;
   font-size: 85%;
}

table {
   border: collapse; 
   border-spacing: 0;   
   width: 90%;
   margin: 0 auto;
}
table tbody td{
   /* border: 1pt solid #95BEF0;   */
   line-height: 1.5em;
   vertical-align: top;
   padding: 0.5em 0.75em;
}

legend {
   background-color: #EBF4FB ;
   margin: 0 auto;
   width: 90%;
   padding: 0.25em;
   text-align: center;
   font-weight: bold;
   font-size: 100%;
}
fieldset {
   margin: 1em auto;
   background-color: #FAFCFF;
   width: 60%;
}
form p {
   margin-top: 0.5em;
}

.box {
   border: 1pt solid #95BEF0;
   padding: 0.5em;
   margin-bottom: 0.4em;
}

.rectangle {
   background-color: #EBF4FB;
   padding: 0.5em;
}
.centered {
   text-align: center;
}

.rounded, .rounded:hover {
   border: 1px solid #172d6e;
   border-bottom: 1px solid #0e1d45;
   border-radius: 5px;
   text-align: center;
   color: white;
   background-color: #8c9cbf;
   padding: 0.5em 0 0.5em 0;
   margin: 0.3em;
   width: 7em;
   -webkit-box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3;
   box-shadow: inset 0 1px 0 0 #72b9eb, 0 1px 4px 0 #b3b3b3; 
}
.rounded:hover {
   background-color: #7f8dad;
}

:required { 
 background:red
}
input:required:focus { 
 background:red
}
input:required:hover { 
  box-shadow: -16px 0 0 3px #333;
}
.rectangle input:required { 
    box-shadow: 0 0 0 10px red;
}
input[type="description"]:valid,
input[type="text"]:valid,
input[type="name"]:valid, 
input[type="password"]:valid, 
input[type="email"]:valid { 
  background: white
} 

input:invalid { 

} 

input:invalid:focus { 

}

Answer 1

You just need to do the same as what you did with the other elements.

In you css add the input:checked and the textarea:valid

input[type="description"]:valid,
input[type="text"]:valid,
input[type="name"]:valid, 
input[type="password"]:valid, 
input[type="email"]:valid,
input[type="checkbox"]:checked, /* for checkbox you need to use the checked propery */
textarea:valid  /*  add the textare :valid if there is something in the texxtarea */
{ 
  box-shadow: none;  /*since you checkbox is using shadow put include this*/
  background: white
} 

Here is the updated version of your fiddle

Answer 2

You need to remove the white spaces inside the textarea tag. Also add this css rule:

textarea:valid { 
  background: white
}

Check this fidde: http://jsfiddle.net/Borachio/xLuc7196/