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

    apply specific CSS to checkbox field

    Asked by xtasy171 on April 07, 2014 at 01:04 PM

    Hi, I'm trying to skin a specific checkbox field (i can call it in CSS by ID, sure) to look like the following:

     

    http://ghinda.net/css-toggle-switch/index.html

     

    i have the source file but what I'm wondering is do i change all the class CSS sections to sit under the styles for that ID?

     

    How can i skin this correctly using the custom CSS feature in jotform?

    Page URL:
    http://form.jotform.us/form/40964611660151

    checkbox checkbox field JotForm source
  • Profile Image

    Answered by xtasy171 on April 07, 2014 at 01:27 PM

    /**

    * Checkbox Three

    */

    .form-checkbox {

    width: 120px;

    height: 40px;

    background: #333;

    margin: 20px 60px;border-radius: 50px;

    position: relative;

    }/**

    * Create the text for the On position

    */

    .form-checkbox:before {

    content: 'On';

    position: absolute;

    top: 12px;

    left: 13px;

    height: 2px;

    color: #26ca28;

    font-size: 16px;

    }/**

    * Create the label for the off position

    */

    .form-checkbox:after {

    content: 'Off';

    position: absolute;

    top: 12px;

    left: 84px;

    height: 2px;

    color: #111;

    font-size: 16px;

    }/**

    * Create the pill to click

    */

    .form-checkbox-item label {

    display: block;

    width: 52px;

    height: 22px;

    border-radius: 50px;-webkit-transition: all .5s ease;

    -moz-transition: all .5s ease;

    -o-transition: all .5s ease;

    -ms-transition: all .5s ease;

    transition: all .5s ease;

    cursor: pointer;

    position: absolute;

    top: 9px;

    z-index: 1;

    left: 12px;

    background: #ddd;

    }/**

    * Create the checkbox event for the label

    */

    .form-checkbox input[type=checkbox]:checked + label {

    left: 60px;

    background-color: #26ca28;

    }

    is my code for this so far. but it is not working completely.

     

    http://form.jotform.us/form/40964611660151

     

  • Profile Image
    JotForm Support

    Answered by TitusN on April 07, 2014 at 03:05 PM

    Hello,

    Before you proceed, please check out our widget and see if it resolves your current requirement: http://widgets.jotform.com/widget/bootstrap_switch_field

    About your CSS:

    Allow a little time to look it over, I shall respond as soon as possible.

  • Profile Image
    JotForm Support

    Answered by TitusN on April 07, 2014 at 06:05 PM

    Hello,

    I'm afraid you would have to use the source code to apply some of the CSS that you have included in your support request.

    Did the widget work out for you?

    Let us know - we can assist to develop - or even raise a feature request of what you want to accomplish with the checkboxes.

    Thanks