styling pseudo element input[type="checkbox"]:checked

I would like to change the background color when a checkbox is selected. I have tried to isolate the element down to the specific box but I have not yet been successful.

Hello ssdform14,

If what you want is to make this on the checkbox itself, here's a sample solution:

input[type="checkbox"] {
   display: none;
}

label {
   cursor: pointer;
}

input[type="checkbox"] + label:before {
   border: 1px solid #7f83a2;
   content: "\00a0";
   display: inline-block;
   font: 16px/1em sans-serif;
   height: 16px;
   margin: 0 .25em 0 0;
   padding: 0;
   vertical-align: top;
   width: 16px;
}

input[type="checkbox"]:checked + label:before {
   background: #3d404e;
   color: #666;
   content: "\2713";
   text-align: center;
}

input[type="checkbox"]:checked + label:after {
   font-weight: bold;
}

Reference: this link.

If you have questions, please let us know.

Thanks.

Hi,
I received an email response that had no content. My question is how to
target the CSS for the :checked state on a checkbox. Subject line:
"Re: styling pseudo element input[type="checkbox"]:checked"
Can you resend the response or direct me to where I might see it on the
Forum?
Thanks, Kim
--
Kim Ericsson
406-546-4243
...

Which specific part of the checkbox you'd like to change its background? My colleague's code will change the checkbox background when it is checked.

Here's what it does:

When not checked:

When checked:

Basically, you will have to inject the CSS codes provided by my colleague into your form by following this guide http://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes.

If you also want to change the background of the option label when checked, you can append this.

input[type="checkbox"]:checked + label {

background: #ffffff;

background: -moz-linear-gradient(left,  #ffffff  22%, #7db9e8  22%); 

background: -webkit-linear-gradient(left,  #ffffff  22%,#7db9e8  22%);

background: linear-gradient(to right,  #ffffff  22%,#7db9e8  22%); 

padding-right:10px;

}

Result:

Feel free to change the color values found in the code to your preferences. 

If in case you still can't view this response in your email, please check the responses in your thread here https://www.jotform.com/answers/990916.

Thank you both for your suggestions.

@EltonCris, I'm trying change the background color of the box itself when "checked" or radio button when "selected" not the label. That code is similar to what I tried first, without success.

@Liyam, I noticed your reference myself on Stack Overflow. However, I don't want to do a complete reset of the checkbox CSS already in place.

The form looks good as is. I've just been letting the design get the better of the function. I will try and add some class specificity to the form elements but I'm not going to spend too much time for a small matter.