Apply CSS to :checked checkbox label

  • Profile Image
    EmailRequestDemo
    Asked on October 21, 2016 at 04:40 PM

    I'm curious if jotform recgonizes the css property :checked for checkboxes and radios. I want to to style the label as the checkmark and show a checked image when clicked but if I use #input_label_14_0:checked the css does not apply.

    If I use #input_label_14_0:hover the css will work.

    Is there a way to apply style for :checked in jotform css?

     

  • Profile Image
    liyam
    Answered on October 21, 2016 at 10:18 PM

    Hello EmailRequestDemo,

    JotForm allows you to insert CSS into your form. The capacity on the CSS is limitless. So your limited capacity on styling your form using CSS shall be limited to your browser's capacity to render it.

    Here is a sample CSS code which you can try using on to your checkbox (referring to your last checkbox on this form: http://www.jotform.us/form/62944170442151):

    #input_14_0 + label {
     color: #000;
     font-style: italic;

    #input_14_0:checked + label {
     color: #f00;
     font-style: normal;

    If you have questions, please let us know.

  • Profile Image
    EmailRequestDemo
    Answered on October 22, 2016 at 09:22 AM

    Thank you for the response! My name is Chris! It works perfectly, thank you. I was using the wrong id for css. 

    I'm now able to show a custom checkmark image when clicking the label. 

    Last question.

    Right now I have to include characters into the label so the checkbox is not automatically unchecked. How can I leave the options blank and not automatically check the checkbox? In the settings, I have it set to not automatically check.
  • Profile Image
    Jan
    Answered on October 22, 2016 at 03:03 PM

    I moved your other question to another thread. Please refer to this URL: https://www.jotform.com/answers/968833.

    Thank you.