What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

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

    Asked by ssdform14 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
    JotForm Support

    Answered by liyam 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.

    Thanks.

  • Profile Image

    Answered by ssdform14 on November 16, 2016 at 09:44 AM
    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
    ...
  • Profile Image
    JotForm Support

    Answered by EltonCris 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 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.

  • Profile Image

    Answered by ssdform14 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.