How to edit just one checkbox and apply specific styling?

on this form: https://www.jotform.com/build/82815789429171

 

On the second page I want to have just a regular checkbox where it says "I have read and agree with the above."

But it's changing it to look like all the other checkboxes (a blue blob) because I edited other checkboxes on this form.

 

Is there a way to get just this one checkbox to look like a regular checkbox while keeping all the other ones modified how they are? Any other solution?

 

Thanks!

 

Add a field ID (#id_159) in your form-checkbox-item CSS declaration.

ex.

Before:

.form-checkbox-item {

    border : 1px solid #d5d5d5;

    box-shadow : 0 2px 2px rgba(0,0,0,.1);

    display : inline-block;

    box-sizing : border-box;

    position : relative;

    overflow : hidden;

}

.form-checkbox-item input {

    display : none;

}

.form-checkbox-item input:checked + label {

    background : linear-gradient(to bottom, #B4F9F1 0%, #ebf5f3 100%);

}

.form-checkbox-item label {

    display: inline-block;

    overflow: hidden;

    margin: 0px 0px 9px 0px;

    position: relative;

    width: 300px;

    height: 40px;

    font: 700 13px/40px Lato, sans-serif;

    font-family: inherit;

    text-align: center;

    color: #999;

    background: #ffff;

    background: linear-gradient(to bottom, #fff 0%, #eee 100%);

    cursor: pointer;

    transform: translateZ(0);

    -webkit-transform: translateZ(0);

    border-radius: 10px;

    border: 2px solid #21a6cf padding: px;

    color: #ffffff;

    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;

    font-size: 20px;

    box-shadow: 8px 8px 5px grey;

    background: #21a6cf;

}

.form-checkbox-item {

   border: none !important;

   box-shadow: none !important;

}

.form-checkbox-item input:checked + label {

background: #117fa0 !important;

}

 

After:

#id_159 .form-checkbox-item {

    border : 1px solid #d5d5d5;

    box-shadow : 0 2px 2px rgba(0,0,0,.1);

    display : inline-block;

    box-sizing : border-box;

    position : relative;

    overflow : hidden;

}

#id_159 .form-checkbox-item input {

    display : none;

}

#id_159 .form-checkbox-item input:checked + label {

    background : linear-gradient(to bottom, #B4F9F1 0%, #ebf5f3 100%);

}

#id_159 .form-checkbox-item label {

    display: inline-block;

    overflow: hidden;

    margin: 0px 0px 9px 0px;

    position: relative;

    width: 300px;

    height: 40px;

    font: 700 13px/40px Lato, sans-serif;

    font-family: inherit;

    text-align: center;

    color: #999;

    background: #ffff;

    background: linear-gradient(to bottom, #fff 0%, #eee 100%);

    cursor: pointer;

    transform: translateZ(0);

    -webkit-transform: translateZ(0);

    border-radius: 10px;

    border: 2px solid #21a6cf padding: px;

    color: #ffffff;

    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Verdana, sans-serif;

    font-size: 20px;

    box-shadow: 8px 8px 5px grey;

    background: #21a6cf;

}

#id_159 .form-checkbox-item {

   border: none !important;

   box-shadow: none !important;

}

#id_159 .form-checkbox-item input:checked + label {

background: #117fa0 !important;

}

The highlighted in red is the one added so it will only target specific field and not all checkbox items.

You can check my sample form here https://form.jotform.com/90167863400960.

I hope that helps. Let us know if you have any questions or if you need further assistance. 

Thanks, worked great!