이 텍스트 영역 및 확인란을 어떻게 참조합니까?

Question

정보를 입력하지 않았을 때 필드에 색깔이 표시되고 CSS에서 유효한 경우 색상이 변경됩니다. 나는 다른 사람들을 참조하고는 있지만 텍스트 영역의 색을 바꿀 수는 없습니다. 그것을 어떻게 참조 할 수 있습니까? 또한, 내가 수락 한 아이디어 옆에 체크 표시를하면 체크 박스 색이 바뀌지 않습니다.

미리 감사드립니다.

여기 여기 내 CSS를 내 jsfiddle http://jsfiddle.net/4u3w29r4/

입니다.

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

다른 요소와 동일하게 작업하면됩니다. 당신에

는 input:checked를 추가 CSS와 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:valid { 
    background: white 
} 

확인이 fidde : http://jsfiddle.net/Borachio/xLuc7196/