How do I reference this textarea and checkbox?

Tags: javascript,html,css

Problem :

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

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 { 
input:required:focus { 
input:required:hover { 
  box-shadow: -16px 0 0 3px #333;
.rectangle input:required { 
    box-shadow: 0 0 0 10px red;
input[type="email"]:valid { 
  background: white

input:invalid { 


input:invalid:focus { 


Solution :

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="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

    CSS Howto..

    How do I format code neatly in HTML/CSS ? I especially want to use the numerical circle callouts, with Python Docutils if I can

    Javascript how to use external Css sheet

    How to relativize URLs in css files in Hakyll?

    How to have different CSS for a class depending on both col-sm-6 and col-xs-12 in Twitter Bootstrap 3?

    how to download google fonts in version bold

    How to load CSS on PC and Mobile by jQuery?

    How do I get a td background color to stretch from left to right, not just the table width, in html & css?

    How to align brand title and links left in Bootstrap navbar?

    How to don't effect elements inside an filter-affected element?

    How to change CSS background-position for the X axis only? [duplicate]

    HTML5 vs HTML4 - h1 tag rendered with extra space - how to remove?

    How to display fieldset text and button inline on small screens?

    How to align elements properly using CSS

    How to convert 6 digit color code to 3 digit quickly in css file?

    How to make a collapsible with a single css drop shadow in Jquery mobile?

    how do i place a text upperright side of the image?

    How To Prevent CSS Background Image From Moving When Shown?

    How to get the scroll bar with CSS overflow on iOS

    How to use overflow-y:auto with child with bottom: 0 and position:absolute?

    How to change css background color dynamically in php using color from database

    How to remember style changes?

    How to write two CSS files: with and without sourcemap

    Html and CSS for emails, how to, where to?

    How to set link color inside GridView cell

    How to create responsive blocks by using just CSS and HTML

    How do I hide the li's that don't fit on a single line?

    How to catch this nth-child() with css

    How to always make page content appear beneath navigation bar?

    How to get the CSS attributes from a control located by XPath using Selenium IDE

    How do I use li:hover to change the WHOLE li color?