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

  • Profile Image
    Asked on November 15, 2016 at 06:00 PM

    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.

  • Profile Image
    Answered on November 15, 2016 at 08:25 PM

    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.


  • Profile Image
    Answered on November 16, 2016 at 09:44 AM
    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
    Thanks, Kim
    Kim Ericsson
  • Profile Image
    Answered on November 16, 2016 at 11:27 AM

    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

    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%); 




    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

  • Profile Image
    Answered on November 16, 2016 at 12:53 PM

    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.