How to change check box size

  • Profile Image
    cthuaegggh
    Asked on May 25, 2012 at 08:25 AM

    is it possible to increase the size of checkboxes?

  • Profile Image
    abajan
    Answered on May 25, 2012 at 09:13 PM

    It can be done but the problem is that it doesn't work in all browsers. Take note of the 8th checkbox on this page. Nevertheless, if you still wish to proceed, the selector that targets checkboxes in your form is .form-checkbox. So you would use the following rule, changing the highlighted values to suit:

    .form-checkbox {
    width: 30px;
    height: 30px;
    }

    Incidentally, while checking your injected CSS, I noticed that the second declaration in the first rule had a property of font-color. There's no such property in CSS. It's simply color. At any rate, assuming you wish to change the color of the checkbox labels from red to light gold (#FFE100), remove the declaration altogether and add the following rule:

    .form-checkbox-item span {
    color: #FFE100 !important;
    }

    If you need further help with this, please let us know.

  • Profile Image
    cthuaegggh
    Answered on May 27, 2012 at 05:52 PM

    oh, o.k. i see.

    i guess it would be nice to have all (most of) the ids and classes which are relevant to have on one paper.

    would that be nice? i mean o.k. you can figure it out somehow, or ask but sometimes i can't figure out cause i#m not that good in coding.

    one thing i have left to say you HAVE ;) to implement @font-face out from jotform. i created the website in adobe muse and hell it would be damn nice to use fonts of choice with that css out from jotform. just wanted to say. because i love jotform and that would be the cherry on top (or how they say) for me the adobe muse user!

    anyway thank again abajan. jotform rules.

  • Profile Image
    EltonCris
    Answered on August 31, 2013 at 03:18 AM

    @cthuaegggh

    Great!

    Using @font-face is actually possible. Our CSS Injection supports some of the @ queries. Here's one of the guide that may help you with this. Beautify your form with Google Web Fonts

    Cheers!