Question

当输入信息时，我的字段是彩色的，而在我的CSS中，它会在有效时改变颜色。我引用了其他人，但我无法改变我的textarea颜色。我该如何参考？此外，我在接受，接受任何想法后，我无法更改我的复选框颜色？

提前致谢。

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

Answer 2

您需要删除textarea标记内的空格。还要添加此css规则：

textarea:valid { 
  background: white
}

检查此fidde：http://jsfiddle.net/Borachio/xLuc7196/

如何引用此textarea和复选框？

2 个答案: