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

Question

当信息未输入时，我将字段着色，在我的 CSS 中，它会在有效时改变颜色。我引用了其他人，但我无法更改文本区域的颜色。我如何引用它？另外，当我接受旁边的复选框选中时，我无法更改我的复选框颜色，有什么想法吗？

提前致谢。

这是我的 jsfiddle http://jsfiddle.net/4u3w29r4/

这是我的 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

您只需要对其他元素执行相同的操作即可。

在你的 css 中添加 input:checked 和 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